CODEWITHSUNDEEP
htmlcss
HBU
HBU

Reputation: 83

How can I make my banner span the whole width of the site

Currently got the following setup by checking out other previously asked questions, although now I'm stuck as it won't span out

Upvotes: 0

Views: 2828

Answers (4)

internet
internet

Reputation: 313

This actually has nothing to do with the width, as header elements are already supposed to span the whole width. There must be some default margin or padding in your html body. All you need to do is set default margin and padding on body tag to be 0. (I usually follow setting margin/padding on body to 0 as a general practice)

You can remove your existing css code and replace it with this (I checked, it's working):

body {
  padding: 0;
  margin: 0;
}
<header class="banner">
  <div class="banner-wrapper">
    <div class="banner-title">
      {{ portal | logo }}
    </div>
    <nav class="banner-nav">
      {{ portal | welcome_navigation }}
    </nav>
  </div>
  <nav class="nav-menu" id="header-tabs">
    <ul>
      <li class="nav-menu-title"><a href="https://www.TEST.co.uk" class="nav-links">Back to Main Site</a></li>
      <li class="nav-contact">| Questions? Get in touch:
        <li class="nav-number">12345568693</li>
    </ul>
  </nav>
</header>

Upvotes: 0

JohnLeToy
JohnLeToy

Reputation: 1

You can add img inside as this.

<div ng-controller="MainCtrl">
  <header class="banner">
    <div class="banner-wrapper">
      <div class="banner-title">
          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Williams_Companies_logo.svg/1280px-Williams_Companies_logo.svg.png" height="100px" width="100%">
      </div>
      <nav class="banner-nav">
            {{ portal | welcome_navigation }}
      </nav>
    </div>
      <nav class="nav-menu" id="header-tabs">
      <ul>
            <li class="nav-menu-title"><a href="https://www.TEST.co.uk" class="nav-links">Back to Main Site</a></li>
        <li class="nav-contact">| Questions? Get in touch: <li class="nav-number">12345568693</li>
      </ul>
      </nav>
  </header>
</div>

Upvotes: 0

kapreski
kapreski

Reputation: 771

you mean you want it to extend to full screen width? if so you need to make its parent element width 100% too for example 

body {
       width: 100%;
}

it could be another parent like a div.container or whatever..

Upvotes: 1

Shital Marakana
Shital Marakana

Reputation: 2887

for 100% width of span

<style type="text/css">
.banner span{
  width: 100% !important;
}
</style>

Upvotes: 0

Related Questions