Nav bar slightly to the right-CodePudding

For some reason, my nav bar is slightly set to the right. I've tried configuring everything to do with position but it doesn't seem to be working. I'm not sure if it's a CSS property or I just messed up with the configuration but it's a few pixels off-center no matter what. It might not be visible instantly (in the image) but I checked it with a virtual ruler and it is off.

header {
  margin: 0 auto;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: transparent;
  position: fixed;
  top: 0;
  transition: 0.3s;
  z-index: 5;
}

.nav-show {
  opacity: 0;
}

header:hover {
  opacity: 1;
  background: var(--main-header-background);
}

.nav-bar {
  list-style: none;
  position: relative;
  display: inline-flex;
}

a.nav-link {
  margin: 2px;
  padding: 5px 10px;
  text-decoration: none;
  color: var(--main-fonts-color);
  font-family: var(--main-font-family);
  cursor: pointer;
  text-transform: uppercase;
}

.active {
  background: var(--main-decor-color);
}

.nav-link:hover {
  color: #000000;
  background: var(--main-decor-color);
}

<header>
  <nav>
    <ul >
      <div ></div>
      <li>
        <a  href=""></a>
      </li>
      <li>
        <a  href=""></a>
      </li>
      <li><a  href="">Test</a></li>
      <li><a  href="">Test</a></li>
    </ul>
  </nav>
</header>

Just as a note it's about 50px off based on what I see in photoshop.

CodePudding user response：

Add these properties to your CSS

* {
  margin: 0;
  padding: 0;
}

Sometimes the browser will apply its default margin and padding to the elements, which happened in your case, where the header has an unusual left margin. Thus, we set margin and padding of every element to 0.

* {
  margin: 0;
  padding: 0;
}

header {
  margin: 0 auto;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: transparent;
  position: fixed;
  top: 0;
  transition: 0.3s;
  z-index: 5;
}

.nav-show {
  opacity: 0;
}

header:hover {
  opacity: 1;
  background: var(--main-header-background);
}

.nav-bar {
  list-style: none;
  position: relative;
  display: inline-flex;
}

a.nav-link {
  margin: 2px;
  padding: 5px 10px;
  text-decoration: none;
  color: var(--main-fonts-color);
  font-family: var(--main-font-family);
  cursor: pointer;
  text-transform: uppercase;
}

.active {
  background: var(--main-decor-color);
}

.nav-link:hover {
  color: #000000;
  background: var(--main-decor-color);
}

<header>
  <nav>
    <ul >
      <div ></div>
      <li>
        <a  href="">Test</a>
      </li>
      <li>
        <a  href="">Test</a>
      </li>
      <li><a  href="">Test</a></li>
      <li><a  href="">Test</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

nav {
   display:block;
   padding:10px;
   margin:5px 55px 5px 55px;
}