I did everything but my css is not working as i want-CodePudding

i am a beginner at html/css and i am following a tutorial to make a navbar with flexboxes i just copied the code but it is not working properly i want to align all items in a row but when i run it in center is just stack things up

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


*{
    box-sizing: border-box;
   
    background-color: #EFF7E1;
    text-decoration: none;
    
}
li,a,button{
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 20px;
    text-decoration: none;
}
header{
    background-image: -moz-linear-gradient(#0000ff #A2d0c1);
    display: flex;
    
    
    justify-content: space-between;
    align-items: center;
    padding: 20px 12%;
}
nav_links li{
    display: inline-block;
}

<html>
    <head>
            <link rel="stylesheet" href="menustyle.css">
            <meta charset="UTF-8">
    </head>
    <body>
        <header>
            <img src="Adidas_Logo.svg.png" alt="logo" style="width: 100px;">
            <nav>
                <ul >
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">Notifications</a></li>
                </ul>
            </nav>
            <a href="#" ><button>Card</button></a>
        </header>
        
         
    </body>
</html>

i tried it on all browsers

CodePudding user response：

You forgot a period for nav_links class. This should work:

.nav_links li {
  display: inline-block;
}

CodePudding user response：

Because you couldn't focus properly on the class selector.

Actually .nav_links not nav_links. Please run the example below.

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


*{
    box-sizing: border-box;
   
    background-color: #EFF7E1;
    text-decoration: none;
    
}
li,a,button{
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 20px;
    text-decoration: none;
}
header{
    background-image: -moz-linear-gradient(#0000ff #A2d0c1);
    display: flex;
    
    
    justify-content: space-between;
    align-items: center;
    padding: 20px 12%;
}
.nav_links li{
    display: inline-block;
}

<html>
    <head>
            <link rel="stylesheet" href="menustyle.css">
            <meta charset="UTF-8">
    </head>
    <body>
        <header>
            <img src="Adidas_Logo.svg.png" alt="logo" style="width: 100px;">
            <nav>
                <ul >
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Categories</a></li>
                    <li><a href="#">Notifications</a></li>
                </ul>
            </nav>
            <a href="#" ><button>Card</button></a>
        </header>
        
         
    </body>
</html>