Question 49418 in Photoshop Question posted in
The official user guide can be found here.

Nav bar slightly to the right – Photoshop

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.

SS of the Website

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 class="nav-bar">
      <div class="bg"></div>
      <li>
        <a class="nav-link" href=""></a>
      </li>
      <li>
        <a class="nav-link" href=""></a>
      </li>
      <li><a class="nav-link" href="">Test</a></li>
      <li><a class="nav-link" href="">Test</a></li>
    </ul>
  </nav>
</header>

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

Tags:

2

Answers


  1. 0

    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 class="nav-bar">
      <div class="bg"></div>
      <li>
        <a class="nav-link" href="">Test</a>
      </li>
      <li>
        <a class="nav-link" href="">Test</a>
      </li>
      <li><a class="nav-link" href="">Test</a></li>
      <li><a class="nav-link" href="">Test</a></li>
    </ul>
  </nav>
</header>
    Login or Signup to reply.
  2. 0 
    nav {
   display:block;
   padding:10px;
   margin:5px 55px 5px 55px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search