Nav bar background only filling the current width of the the view port-CodePudding

My navigation bar is completely backgrounded by the color white when i have the project at max browser width but when scaling it down the nav bar background starts to disappear as it should. My issue is that the background for the nav doesnt autofill as i horizontally scroll at the lower widths.I am fairly new to css and any input is appreciate, see photo for issue.enter image description here

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
  width: auto;
}

body {
  background: linear-gradient(lightblue, lightpink);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
}

.navbar-container {
  width: auto;
}

nav {
  background-color: whitesmoke;
}

.navbar-container nav ul {
  list-style-type: none;
  padding: 0;
  box-shadow: 0 0 5px 0 black;
}

.navbar-container nav ul li {
  display: inline-block;
  margin-left: 6.25em;
  position: relative;
  left: 29em;
}

.navbar-container nav ul li h2 {
  color: black;
}

.navbar-container nav ul li a {
  text-decoration: none;
  color: black;
}

<header>
  <div >
    <nav>
      <ul>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Home</a></li>
        <li>
          <h2>Correia</h2>
        </li>
        <li><a href="#">Contact Me</a></li>
        <li><a href="#">My Projects</a></li>
      </ul>
    </nav>

  </div>
</header>

<body>



</body>
<footer>



</footer>

CodePudding user response：

I think the problem is in the code below

.navbar-container nav ul li {
display: inline-block;
margin-left: 6.25em;
position: relative;
left: 29em;
}

there you set the position to relative, it makes the li element different dimensions from the nav element, so the nav element can't catch the width change of the li element. the solution is to lower the value left for example to 20em or value as needed

CodePudding user response：

do this:

*{ margin: 0; padding: 0; } or set margin: 0 to your nav