CODEWITHSUNDEEP
htmlcss
erniemar
erniemar

Reputation: 19

Why can't I center my navigation bar in CSS?

I want the logo and nav links centered horizontally. There is too much space on the right side. What is the best way to fix this?

Tried inline-block on the nav element. Tried text-align instead of align-items.

I expect the content to be centered with even space on both sides, but the right side has more spacing.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: black;
  font-family: 'Poppins', sans-serif;
}

.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

<header>
  <nav>
    <div class="logo">
      <h4>Great Falls</h4>
    </div>
    <ul class="nav-links">
      <li><a href="#">Home</li>
      <li><a href="#">Plan Your Visit</li>
      <li><a href="#">Learn More</li>
      <li><a href="#">Contact</li>
    </ul> 
  </nav>
</header>

Upvotes: 0

Views: 164

Answers (2)

Samuel Momanyi
Samuel Momanyi

Reputation: 64

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

should work

also here is a code pen https://codepen.io/anon/pen/mYvVgL?editors=1100

Upvotes: 0

dejakob
dejakob

Reputation: 2102

your have this in your css code:

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

By default, flex-direction is set to row. Therefore justify-content is horizontal and align-items vertical. In this piece of CSS, you center all children vertically, but put equal spacing around the children horizontally.

You should set justify-content to center in order to align items centered on a row direction.

Upvotes: 1

Related Questions