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?

And here’s my code if in need:

<div class="main-container">
  <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>
<div class="well">


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;