Creating a nav bar with flexbox

I’ve been learning code only for a couple of weeks, so I have a very basic knowledge. I got stuck trying to build a navbar using flexbox.

For some reason I can’t get my nav buttons () to stand in a horizontal way. I’ve been trying and rewritting my code, but I can’t figure it out.

Here’s the link to my code:

Thanks in advance.

    font-family: 'Yanone Kaffeesatz', sans-serif;
    background-color: lightGray;

navbar {
    background: white;
    box-shadow: 0px 0px 10px var(--clr-gray200);
    padding: 1rem 0;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    height: 70px;
    width: 70px;
    margin-right: auto;
    margin-left: 10px;

    list-style: none;
    margin: 0;
    padding: 0;
li, a{
    text-decoration: none;
    padding: 8px;
li a:hover{
    background-color: black;
    color: white;
<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="[email protected]&display=swap" rel="stylesheet">
        <link rel=StyleSheet HREF="estilo.css">

        <header id="header">
            <navbar id="nav-bar">
                    <li><img src="" id="header-img" alt="Company logo"></li>
                    <li><a href="#form">Contact</a></li>
                    <li><a href="#beers">Beers</a></li>
                    <li><a href="#video">Video</a></li>

Leave a Comment