Need a help with portfolio's padding

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;
}

To remove the gap above your navbar, add the following:

body {
  margin: 0; 
}