0

I want to create a simple navbar and I want it centered. It works, but when I add an image above the ul, the list is not centered anymore and I don't know why. I centered the header element with justify-content center.

To center the logo, I changed the margin left and right to auto and put a width of 20% on it. It looks like something is wrong with the image but I'm not sure.

enter image description here

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

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

body{
    font-family: "Montserrat",sans-serif;
    font-weight: 500;
}

header{
    display: flex;
    padding: 25px 10%;
    justify-content: center;
}

.logo{
    display: block;
    margin: 0 auto;
    width: 20%;
}

.nav__links li{
    display:inline;
    padding: 0 15px;
}

.nav__links li a{
    color:#000000;
    text-decoration: none;
    transition: 0.3s;
}

.nav__links li a:hover{
    color: rgb(0, 0, 0,0.8);
}
<!DOCTYPE html>

<head>
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <nav>
            <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"
                alt="google">
            <ul class="nav__links">
                <li><a href="#">Plan your visit</a></li>
                <li><a href="#">Exhibitions and events</a></li>
                <li><a href="#">Art and artists</a></li>
                <li><a href="#">Store</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>
Turnip
  • 35,836
  • 15
  • 89
  • 111
Appel Taart
  • 78
  • 2
  • 10

1 Answers1

1

you can solve the centering problem by adding this. if you want the A tags to appear in the middle, you need to apply display flex specifically to the UL tag. So you can change whatever direction you want to change. 

ul{
    display: flex;
    justify-content: center;
}

header{
    display: flex; 
    padding: 25px 10%;
    justify-content: center; // and I added this because you want it right in the middle of the page.
}


|header // if you give a d-flex it only affects the same level of item, so only nav is affected
   |nav // if you give a d-flex it only affects the same level of item, so img and ul is affected
      |img
      |ul // if you give a d-flex it only affects the same level of item, so elements within the li tag are affected.
        |li
CanUver
  • 1,756
  • 2
  • 6
  • 19
  • Hey Thank you it works! But can you explain me more why I have to do the same for the ul? I thought I already said in the header that it should be centered. So it would center all the items inside the header tag? – Appel Taart May 22 '20 at 10:12
  • 1
    Only when you use display flex on the header tag does it not affect the UL tag because they are not of the same level. when you give header the display flex, it's just the nav tag. But the A tags inside the UL tag are left-leaning. It doesn't effect them. So you have to go down to ul and use display flex on them. know what I mean ? I updated my answer on a chart, you can look at it. whatever you don't understand please ask me. – CanUver May 22 '20 at 10:16
  • Thanks that is much clearer! Then I have one more question. Why did it work when I did not add the image yet? So I had the justify-content in the header tag, so it should only effect the nav right? But still my list items got centered. – Appel Taart May 22 '20 at 10:27