Background color to Navbar links - html

Question

I have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn't cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div2" class="navbaritems">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div3" class="navbaritems">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div4" class="navbaritems">Resume</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<img src="img/email.png" style="width:35px;height:35px;border-radius:25px;">&nbsp&nbsp&nbsp
</li>
<li class="nav-item active">
<img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;">&nbsp&nbsp&nbsp
</li>
<li class="nav-item active">
<img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;">&nbsp&nbsp&nbsp
</li>
</ul>
</div>[![enter image description here][1]][1]
</nav>

Answer 1

You could try this:
<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">

Answer 2

Try adding the below style:
.navbar.scrolled .navbar-collapse{
background: #116980;
margin: -15px;
padding: 15px;
z-index: -1;
}
The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.