CSS center list items horizontally and to right

August 4, 2022

I’m having trouble with centering li so that they are both on the right site of navbar and are centered vertically. I want them to also not clip out of navbar when resized.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0 10vw;
  background-color: #E7E7E7;
}

.main-site {
  background-color: white;
}

.main-body {
  padding-top: 6vh;
}

nav,
.bottom-nav {
  position: fixed;
  background-color: red;
  height: 6vh;
  width: 80vw;
}

.nav-list {
  position: absolute;
  margin: 1% 0;
  right: 3vw;
}

.nav-items {
  list-style: none;
  right: auto;
  display: inline-block;
  font-size: 20px;
  padding: 0 1vw;
}

<div class="main-site">
  <nav>
    <ul class="nav-list">
      <li class="nav-items"><a href=""> Item 1</a></li>
      <li class="nav-items"><a href=""> Item 2</a></li>
      <li class="nav-items"><a href=""> Item 3</a></li>
      <li class="nav-items"><a href=""> Item 4</a></li>
    </ul>
  </nav>
</div>

>Solution :

You just need remove your view height for the nav and stop absolute positioning. Using flexbox, the nav css below will be responsive on resize.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  margin: 0 10vw;
  background-color: #E7E7E7;
}

.main-site {
  background-color: white;
}

.main-body {
  padding-top: 6vh;
}

nav,
.bottom-nav {
  display:flex;
  justify-content: flex-end;
  margin-left: auto;
  background-color: red;
  width: 80vw;
}

.nav-list {
  margin: 1% 0;
  right: 3vw;
}

.nav-items {
  list-style: none;
  right: auto;
  display: inline-block;
  font-size: 20px;
  padding: 0 1vw;
}

<body>
  <div class="main-site">
    <nav>
      <ul class="nav-list">
        <li class="nav-items"><a href=""> Item 1</a></li>
        <li class="nav-items"><a href=""> Item 2</a></li>
        <li class="nav-items"><a href=""> Item 3</a></li>
        <li class="nav-items"><a href=""> Item 4</a></li>
      </ul>
    </nav>
  </div>
</body>