CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Evan Young
Evan Young

Reputation: 9

Cannot Get Navbar to stretch across screen

I want to get my black navbar div to stretch completely across the screen. However, using width: 100% does change anything.

If anyone could give me advice on how to improve the way I created the navbar, it would be much appreciated.

https://codepen.io/vegetablecook/pen/qVgOPJ

HTML 

<div class = "container">
    <div class = "span12 text-center">
        <h1>Bill Gates</h1>
  </div>
</div>
  <div class = "container" id = "nav-container">
    <nav class = "navbar navbar-default">
    <ul class = "navbar-nav flex-row ">
      <li class = "nav-item"><a id = "special" href = "#"> Business Magnate</a></li>
      <li class = "nav-item"><a href = "#"> Investor</a></li>
      <li class = "nav-item"><a href = "#"> Philanthropist</a></li>
    </ul>
    </nav>
</div>

CSS:

body { 
  margin-top: 60px;
}

.navbar-nav > li{
  padding-left: 30px;
  padding-right: 30px;
}
.navbar-nav > li > a {
  font-size: 40px;
  color: white;
  text-decoration: none;
}


#nav-container{
  background-color:black;
  width: 100%;
  top: 0px;
  width: 100%;
  height: 100px;

}  

#billgates-headshot{
  width:40%;
}
#row2{
  padding-top: 50px;
}
#billgates{
  padding-left: 50px;
}
#billgates-midspeech{
  width: 70%;
}

Upvotes: 0

Views: 129

Answers (2)

fl0psy
fl0psy

Reputation: 491

The "container" class in bootstrap isn't made to be 100%. You want to use the "container-fluid" class to span across the viewport. I've made some small changes which can be found at https://codepen.io/anon/pen/LeeMGy.

Documentation reference: https://getbootstrap.com/docs/3.3/css/#overview-container

Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
  ...
</div>

Upvotes: 2

Reed
Reed

Reputation: 1642

It's your use of the container class - if you inspect the element using your developer tools you'll see that the child container is being padded by the parent container.

Remove the nested containers or move your nav outside of the scope of your parent container to fix this.

Upvotes: 0

Related Questions