Navigation menu - help

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?

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

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

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

<div id = header>

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

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