My align items center is not working. Why?

Question

I've had an issue with my header. The nav links I have just won't go to the center no matter what I do. Here are the codes. Can anyone tell me why isn't it working ?

body {
  background-color: black;
  color: #6e07a6;
  font-size: 16px;
  font-family: 'Poppins', sans;
  font-weight: 400;
}

.header-part {
  width: 100%;
  height: 5rem;
  background-color: #6e07a6;
  color: white;
  margin: 0;
  padding: 0;
  top: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  text-decoration: none;
  justify-content: space-evenly;
  align-items: center;
}

<div class="header-container">
  <div class="header-part">
    <header id="header">
      <ul class="nav-links">
        <li class="nav-link">Home</li>
        <li class="nav-link">Projects</li>
        <li class="nav-link">Contact</li>
        <li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
      </ul>
    </header>
  </div>
</div>
<div class="main-page"></div>

you need to center the nav-links element – Temani Afif Sep 02 '21 at 19:31 — Temani Afif, Sep 02 '21 at 19:31

score 1 · Answer 1 · answered Sep 02 '21 at 16:34

body {
    background-color: black;
    color: #6e07a6;
    font-size: 16px;
    font-family: 'Poppins', sans;
    font-weight: 400;
}


.header-part {
    width: 100%;
    height: 5rem;
    background-color: #6e07a6;
    color: white;
    margin: 0;
    padding: 0;
    top: 0;
    display: flex;
    align-items: center;
}

#header {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-links {
    display: flex;
    list-style: none;
    text-decoration: none;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Test site</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="header-container">
            <div class="header-part">
                
                <header id="header">
                    <ul class="nav-links">
                        <li class="nav-link">Home</li>
                        <li class="nav-link">Projects</li>
                        <li class="nav-link">Contact</li>
                        <li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
                    </ul>
                    
                </header>
            </div>
        </div>
        <div class="main-page">

        </div>
          
    </body>
</html>

I set the display types for your wrapping elements, and also defined their width to fill the purple area. By default they are set to display: block;

If you're new to CSS, don't fret! You can see how the browser is interpreting your code by right clicking on element, selecting 'Inspect Element', locating it in the resulting screen, and then looking at its properties in the computed tab. This will show you what is overriding what. — Clayton Engle, Sep 02 '21 at 16:37
No problem! You can select this as the answer that worked, and that will let other people know it's solved and not to worry with answering. (It also gives me some rep :) ) — Clayton Engle, Sep 03 '21 at 17:32

score 0 · Answer 2 · answered Sep 02 '21 at 16:43

0

they are in center , the thing is your ul height doesn't match to your header add this line to .nav-links

height : 5rem;

answered Sep 02 '21 at 16:43

Hamed Tahmasebi

430
1
5
12

My align items center is not working. Why?

2 Answers2