Why is flex box not working in my code? Pease help me check if it has any problem-CodePudding

I started writing this code with HTML, not finish though, but expected the navbar to align horizontally to them, but this isn't working. I'm a beginner at coding and I need help with this please.

I was expecting the navbar to appear at the top of the page but it somehow was aligned to the left.

@import url('https://fonts.googleapis.com/css2?family=Playfair Display:wght@400;600&family=Poppins:wght@300;400&display=swap');
/* !BASE STYLES/RESET */
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --light-color: #f3f3fe;
    --dark-color: #363636;
    --border-top-color: rgba(0,0,0,.1);
    --link-hover-color: rgba(255,255,255,.2);
    --title-font-family: 'Playfair Display', 'serif';
    --body-font-family: 'Poppins', 'sans-serif';
    --container-padding: 1.5rem;
    --section-vertical-spacing: 8rem;
}
html{
    font-size: 62.5%;
}
body{
    font-family: var(--body-font-family);
    font-size: 1.6rem;
    line-height: 1.5;
    background-color: var(--light-color);
    color: var(--dark-color);
    overflow-x: hidden; 
}
body.dark-theme{
    --light-color: #000;
    --dark-color: #fff;
    --border-top-color: rgba(255, 255, 255, .1);
}
a{
    text-decoration: none;
    color: inherit;
    outline: none;
}
img{
    max-width: 100%;
    display: block;
}
ul{
    list-style: none;
}
span{
    display: inline-block;
}
i{
    font-size: 2.4rem;

}
input,
button,
textarea{
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: none;
    outline: none;
}
/* !HEADER */
.header{
    margin-bottom: 5rem;
/* !navbar */
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8rem;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NGAYU'S WEBSITE</title>
    <!-- !BOX ICONS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <!-- !SCROLL REVEAL -->
    <script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
    <!-- !MY STYLESHEET -->
    <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
    <!-- !HEADER -->
    <header  id="home">
        <nav >
            <a href="./index.html" >Ngayu</a>
            <div >
                <button type="button" >
                    <i ></i>
                    <i ></i>
                </button>
                <button type="button" >
                    <i ></i>
                    <i ></i>
                </button>

            </div>
            <div >
                <ul >
                    <li >
                        <a href="#" >
                            <span>01</span> About
                        </a>
                    </li>
                    <li >
                        <a href="#" >
                            <span>02</span> Portfolio
                        </a>
                    </li>
                    <li >
                        <a href="#" >
                            <span>03</span> Contact
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</body>

</html>

CodePudding user response：

you're missing the closing curly bracket in .header

CodePudding user response：

In your CSS, you are missing the ending curly brace (}) for the .header selector.

So, change your .header code to the below.

.header {
   margin-bottom: 5rem;
}

The code above only adds the ending curly brace to prevent CSS errors.