Overflowing background color from header - html

Question

My header background color overflows past the page. I am wondering how to adjust its width so that it automatically fills whatever screen size without overflowing. I assume this has something to do with my width property on the "white" class, or because it is within a container. Basically it causes a horizontal scroll due to the background color extending, instead of just stopping at 100% width of the page. I appreciate any help I get for this, thanks a lot.
.white {
background-color: #fff;
position: relative;
}
.white:before {
content: "";
background-color: #fff;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
<div class="container">
<nav class="navbar navbar-light navbar-expand-lg white row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<!-- Logo -->
<div class="logo">
<a href="#" class="navbar-brand">
<img src="{% static 'accounts/logo/logo.png' %}" height="40" width="40">
</a>
</div>
<!-- Search Box -->
<div class="search_wrapper">
<input type="text" placeholder="Search" class="search_input">
<button class="search_button">🔍</button>
</div>
<!-- Nav List -->
<ul class="navbar-nav ml-auto">
<span class="middle">
<li class="nav-item">
<a href="#" class="nav-link">
<img src="{% static 'accounts/blah/blah.png' %}" height="20" width="20" id="home"> Random
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img src="{% static 'accounts/blah/blah.png' %}" height="20" width="20" id="lessons"> Random
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img src="{% static 'accounts/blah/blah.png' %}" height="30" width="30" id="teacher"> Random
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img src="{% static 'accounts/icons/blue.png' %}" height="20" width="30" id="msg"> Random
</a>
</li>
</span>
<!-- Avatar Dropdown -->
<span class="right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<img src="{% static 'accounts/blah/blah.png' %}" height="30" width="25"> Blah
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Random</a>
<a class="dropdown-item" href="#">Random</a>
<a class="dropdown-item" href="#">Random</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Random</a>
</div>
</li>
</span>
</ul>
</div>
</nav>

Answer 1

Use <div class="container-fluid"> instead of <div class="container">

Answer 2

This is vanilla CSS without bootstrap since this is what I'm using.
I can't guarantee that this works the same with bootstrap.
You are trying to use
width: 200vw;
since 1vw is relative to 1% of the width of the viewport you are giving your content a width of 2 times the width of th viewport.
width: 100vw;
margin: 0;
padding: 0;
should make it span the whole width of the screen.
You just have to make sure that there are no paddings or margins either on the left or tight side.
Here a small refreshment for the units.
https://www.w3schools.com/cssref/css_units.asp
You could also try some negative margin:
.white {
background-color: #343434;
position: relative;
width:100vw;
margin: -10px;
}
should work fine for you
codepen: https://codepen.io/ironlors/pen/bjYOpQ