Solution 1 :

You are using flex on the header, which is having only one child i.e. nav.

Either use display flex on the ul

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400;600&display=swap');

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

li,a{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}

ul {
    display: flex;
    justify-content:space-between;
    align-items:center;
}

header{
    padding: 30px 10%;
}

Codepen: https://codepen.io/manaskhandelwal1/pen/qBaLday


or use display inline on the li.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400;600&display=swap");

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

li,
a {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  display: inline;
}

header {
  padding: 30px 10%;
}

Codepen: https://codepen.io/manaskhandelwal1/pen/VwKqLaq

Problem :

I am trying to make a simple navigation bar in HTML/CSS and I am following a youtube tutorial. I followed the exact steps but for some reason, the display flex is not working.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IEEE GRIET SB</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Societies</a></li>
                <li><a href="#">Exe - Com</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Pragnya</a></li>
                <li><a href="#">Laurels</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400;600&display=swap');

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

li,a{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}

header{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 30px 10%;
}

This is my output

Comments

Comment posted by Manas Khandelwal

@ravuripraneeth no problem, If you need any help mail to me at [email protected]. ✌

By