Basic alignment issue with CSS flexbox

Question

I am creating my first sample webpage for a fictional company. I am trying to use flexbox to display the three internal links in my <nav> element evenly spaced across the banner. I verified the nav element spans across the entire page by changing background color, and so I'm left shaking my head at something I'm sure is fairly obvious to someone experienced.

nav {
  display: flex;
}

.nav-element {
  display: flex;
  justify-content: space-around;
  margin: 0 1rem;
}

<header>
  <nav>
    <a class="nav-element" href="#">Mission Statement</a>
    <a class="nav-element" href="#">Produce</a>
    <a class="nav-element" href="#">Helping Hands</a>
  </nav>
  <h1 class="title">portlandia farms</h1>
</header>

score 2 · Answer 1 · answered Jul 28 '20 at 16:52

You only need to set the flex display property and justify-content on the nav container, not the links themselves:

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

.nav-element {
  margin: 0 1rem;
}

<header>
  <nav>
    <a class="nav-element" href="#">Mission Statement</a>
    <a class="nav-element" href="#">Produce</a>
    <a class="nav-element" href="#">Helping Hands</a>
  </nav>
  <h1 class="title">portlandia farms</h1>
</header>

Gustavo Freire · Answer 2 · 2020-07-29T11:53:17.760

As flexbox works you should put the flexbox related properties on the parent, to align it's children

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

.nav-element {
  margin: 0 1rem;
}

<header>
  <nav>
    <a class="nav-element" href="#">Mission Statement</a>
    <a class="nav-element" href="#">Produce</a>
    <a class="nav-element" href="#">Helping Hands</a>
  </nav>
  <h1 class="title">portlandia farms</h1>
</header>

score 1 · Answer 3 · answered Jul 28 '20 at 17:01

I'm not sure if I really understand what you want, but I think you put the space-around in the wrong place, you need to put it inside nav tag, like this:

    <style>
        nav {
            display: flex;
            justify-content: space-around;
        }
        
        .nav-element {
            display: block;
            margin: 0 1rem;
        }
    </style>

Basic alignment issue with CSS flexbox

3 Answers3