Flexbox 01

<!-- HTMl-->

<html>
<head>
     <link href="index.css" rel="stylesheet">
</head>
<body>

    <header class="header">
        <a href="/">Logo</a>
        <nav>
            <ul class="menu">
                <li><a href="/">Sobre</a></li>
                <li><a href="/">Produtos</a></li>
                <li><a href="/">Contato</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

<!-- CSS -->

 body, ul, li, p{
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 1.2rem;
    font-family: Arial;

 }
 a{
    text-decoration: none;
    color: white;
 }

 .header{
    background: #1d1e20;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
 }
 .menu{
    display: flex;

 }
 .menu li{
    margin-left: 10px;
 }
 .menu li a{
    display: block;
    padding: 10px;
    background: tomato;
 }