Cannot Get Navbar to stretch across screen - html

Question

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"> Investor</li>
<li class = "nav-item"> Philanthropist</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%;
}

Answer 1

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>

Answer 2

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.