Navigation menu - help


#1
Screenshots of problem


----------------------------------------------------

Not sure where to post this, so doing it here. My problem is that the all the options in the navigation menu that I have created have a huge gap between them. How do I make the gap nonexistent when in hover?

my html code

<!DOCTYPE html>
  <html>
  <head>
    <title>Work in progress...</title>
    <link href = "website1.css" type = "text/css" rel = "stylesheet">
  </head>
<body>
<header>
  <div class = overview>

    <ul>
      <li class = H 5><a href = "#">Home</a></li>
      <li class = H 4><a href = "#">Projects</a></li>
      <li class = H 3><a href = "#">About</a></li>
      <li class = H 2><a href = "#">Contact</a></li>
      <li class = H 1><a href = "#">More info</a></li>
      <li class = H 6><a></a></li>
      <li class = H 7><a></a></li>

    </ul>
  </div>
</header>
<div id = header>
<h1>wip</h1>
<h4>wip</h4>
</div>

</body>
</html>
Css code

body {
  background-color: rgba(20, 20, 20, 1);
  z-index: 5;
}

*{
  margin: 0;
  padding: 0;
}


.overview ul {
  list-style: none; 
  background-color: rgba(20, 20, 20, 0.9);
  text-align: center;
  margin: 0;
  padding: 0;
  height: 65px;
}

.overview li {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 60px;
  display: inline-block;
  margin-left: 35px;
  margin-right: -10px;
  padding-left: 15px;

}
.overview img{
  display: inline-block;
  float: left;
  margin-left: 50px;
  margin-top: 10px;
  margin-right: -250px;
}

.overview a{
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 40px;
}

.overview a:hover{
  border-color: : rgba(20, 20, 20, 0.9);
  box-shadow: 0 0 8px;
  background-position: center;
}

#header {
  background-color: rgba(10, 10, 10, 0.9);
  color: white;
  text-align: center;
  height: 250px;
  z-index: 10;
}

Edit: managed to fix it by messing around with margin/padding


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.