I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for my navigation:
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li>
<a href="test1.html">Test1 <span class="carrot"></span></a>
<div>
<ul>
<li><a href="test#testA">TestA</a></li>
<li><a href="test.html#B">TestB</a></li>
<li><a href="teset.C">TestC</a></li>
</ul>
</div>
</li>
<li><a href="test2.html">Test2</a></li>
<li><a href="test3.html">Test3</a></li>
</ul>
</nav>
And here's the CSS style applied to the navigation:
nav {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
I'm struggling to figure out how to make the entire width of the navigation bar cover the screen without any empty spaces on the sides. Any suggestions on how I can fix this issue?