CODEWITHSUNDEEP
htmlcssflexbox
mpc75
mpc75

Reputation: 989

How do I get my navigation items to center in my nav?

enter image description here

I can't figure out why my mobile navigation items (green boxes) are not centering.

I've tried commenting out all other bits of code and I still see the block. It looks like the core of the problem is that space is applied between the ul and the individual_nav_items, but I have no idea where it's coming from.

The body tag wrapping is the black box in the image. 

  @media screen and (max-width: 740px) {
  nav {
    display: block;
    background-color: red;
  }
  ul {
    display: flex;
    flex-direction: column;
    border: solid;
    border-color: blue;
  }
  .individual_nav_item {
    border: solid;
    border-color: lawngreen;
    text-decoration: none;
    color: black;
  }
<nav>
  <button onclick="toggleNav()" id="mobileNav" class="hamburger hamburger--slider" type="button">
    <span class="hamburger-box" >
      <span class="hamburger-inner"> </span>
    </span>
  </button>

  <ul>
    <a href="/index.html" class="individual_nav_item">Home</a>
    <a href="/about_us.html" class="individual_nav_item">About Us</a>
    <a href="#" class="individual_nav_item">FAQ</a>
    <a href="#" class="individual_nav_item">Contact</a>
  </ul>
</nav>

Upvotes: 0

Views: 34

Answers (1)

DamienVassart
DamienVassart

Reputation: 171

Is the following CSS displaying what you are trying to achieve ?

@media screen and (max-width: 740px) {


nav {
    display: block;
    background-color: red;
  }

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    align-items: center;
    border: solid;
    border-color: blue;
  }

  .individual_nav_item {
    border: solid;
    border-color: lawngreen;
    text-decoration: none;
    color: black;
    width: 100%;
  }

Upvotes: 2

Related Questions