-2

I hope you are all doing well, I have this nav bar, which took me a very long time to figure out, how I could separate the padding from the logo and my "li" elements so I could have a nice centered menu. But I think I kinda have something working, but I like to do things the right way, does anyone has a better way to center all the "li" elements (Home, About...).

Because at this current time I have padding-left: 30em; which give the feeling of the menu been centered, but is there a way to do it automaticlly ? I tried padding auto but that dosen't work.

Thank your for helping a young dev.

@media screen and (min-width: 780px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    margin: 0;
    min-height: 100vh;
  }

  ul {
    list-style: none;
  }

  a, u {
    text-decoration: none;
  }

  .header-menu {
    background-color: grey;
    padding: 1em 1em;
    width: 100vw;
    display: inline-flex;
    align-items: center;
  }

  .header-flex, {
    display: inline-flex;
    align-items: center;
  }

  .logo {
    cursor: pointer;
  }

  .main-nav {
    cursor: pointer;
    padding-left: 30em;
  }

  .main-nav li {
    display: inline-block;
    padding: 0em 1.2em;
  }

  .main-nav a {
    color: #34495e;
    font-size: .99em;
  }

  .main-nav a:hover {
    color: #718daa;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="./css/home.css">
</head>

<body>

  <header>
    <div class="header-menu">
      <h1 class="logo">Logo</h1>
      <nav class="header-flex">
        <ul class="main-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

</body>

</html>

Thank for helping, How I solved the issue

      @media screen and (min-width: 780px) {
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        body {
          margin: 0;
          min-height: 100vh;
        }

        ul {
          list-style: none;
        }

        a, u {
          text-decoration: none;
        }

        .header-menu, .header-flex {
          background-color: grey;
          padding: 1em 1em;
          width: 100vw;
          display: inline-flex;
          align-items: center;
        }

        .logo {
          cursor: pointer;
        }

        .main-nav {
          cursor: pointer;
          margin: 0 auto;
        }

        .main-nav li {
          display: inline-block;
          padding: 0em 1.2em;
        }

        .main-nav a {
          color: #34495e;
          font-size: .99em;
        }

        .main-nav a:hover {
          color: #718daa;
        }
      }
HypeLiveUsb
  • 11
  • 4
  • Could you be a little more specific? If you just want to center it horizontally you can just do `margin: 0 auto;` to center it horizontally. [Here's how it works](https://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin0-auto). I also suggest you look at [this video](https://www.youtube.com/watch?v=qm0IfG1GyZU) for some cool CSS tips which will help out a lot. – Lae May 24 '21 at 01:58
  • 1
    yes my goal is to center it horizontally but margin / padding won't work even with margin: 0, auto; I have to specify padding-right: 30em, to make it move, something I did wrong, thanks for the video I will definitely take a look – HypeLiveUsb May 24 '21 at 02:04
  • Ohh ok so from the stackflow post I guess I have to put them in a single container in order to be able to do padding: auto – HypeLiveUsb May 24 '21 at 02:06

2 Answers2

2

I am adding my answer here from the comment I made in the post.

If you just want to center it horizontally, you can just add: margin: 0 auto;
Here's how it works.

Lae
  • 832
  • 1
  • 13
  • 34
1

To do thus kind of design, I usually use css grid to make 3 equal columns even if I'm only using two of them. If you make the header display: grid and remove the padding it works out how you want it.

@media screen and (min-width: 780px) {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    margin: 0;
    min-height: 100vh;
  }

  ul {
    list-style: none;
  }

  a, u {
    text-decoration: none;
  }

  .header-menu {
    background-color: grey;
    padding: 1em 1em;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .header-flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    cursor: pointer;
  }

  .main-nav {
    cursor: pointer;
  }

  .main-nav li {
    display: inline-block;
    padding: 0em 1.2em;
  }

  .main-nav a {
    color: #34495e;
    font-size: .99em;
  }

  .main-nav a:hover {
    color: #718daa;
  }
}
<header>
    <div class="header-menu">
      <h1 class="logo">Logo</h1>
      <nav class="header-flex">
        <ul class="main-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
Sean
  • 936
  • 4
  • 15