I am just starting out with CSS and HTML. Is there a way to eliminate the gaps around my navigation bar? Here is an example image showing the gaps around the navbar.
I have attempted using width and height attributes but it did not resolve the issue.
* {
text-decoration: none;
}
.navbar {
background: rgba(0, 0, 0, 0.6);
font-family: calibri;
padding-top: 5px;
padding-right: 15px;
padding-left: 15px;
top: 10;
left: 0;
witdth: 100%;
height: 130px;
box-sizing: border-box;
border-bottom: 1px solid #000;
background-size: cover;
widtth: cover;
height: cover;
}
.navdiv {
display: flex;
align-items: center;
justify-content: space-between;
}
li {
list-style: none;
display: inline-block;
}
li a {
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}<body background="background.jpg">
<nav class="navbar">
<div class="navdiv">
<div class="logo"><a href="#"><img id="logo" src="views.png" width="12%" height="12%"></a></div>
<ul>
<li><a href ="#">Subscribe</a></li>
<li><a href ="#">Movies</a></li>
<li><a href ="#">TV Shows</a></li>
</ul>
</nav> Trying to adjust the Margin and Padding also proved ineffective.