So im trying to make my portfolio im currently making fill up the gap on top, i used w3school’s help to make navigation bar, but after making About move to the right it seems to mess up my margin and padding a bit, i gave me some gap on the top, so im trying to get rid of it. Any tips?
https://codepen.io/bego96/pen/wjYqxg
And here’s my code if in need:
HTML:
<div class="main-container">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li style="float:right"><a class="active" href="#">About</a></li>
</ul>
<div class="well">
</div>
</div>
CSS:
ul {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 15px 30px;
color: white;
text-decoration: none;
margin: 10px;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.main-container {
margin: auto;
position: relative;
width: 1332px;
background-color: #cccccc;
height: 400px;
}