JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Domainagentur Markus Kein</title>
    <link rel="stylesheet" href="/css/stylesheet.css">
  </head>
  <body>

    <header>

            <img id="logo" src="http://www.domainagentur.de/images/logo.png">
            <nav id="haupt-navigation">
               <ul>
                  <li><a href="">Home</a></li>
                  <li><a href="">Unternehmen</a></li>
                  <li><a href="">Dienstleistungen</a></li>
                  <li><a href="">Fragen&Antworten</a></li>
                  <li><a href="">Impressum</a></li>
               </ul>
            </nav>
            <nav id="mobil-navigation">
               <ul>
                  <li><a href=""><span id="hamburger">&equiv;</span></a>
                     <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Unternehmen</a></li>
                        <li><a href="">Dienstleistungen</a></li>
                        <li><a href="">Fragen&Antworten</a></li>
                        <li><a href="">Impressum</a></li>
                     </ul>
                  </li>
               </ul>
            </nav>
            <img id="headerbild" src="https://cdn.pixabay.com/photo/2015/06/24/15/45/ipad-820272_960_720.jpg">

    </header>
  </body>
</html>

CSS

* {
        box-sizing: border-box;
       }
    header {
        display: flex;
        flex-wrap: wrap;
        width: 1024px;
        max-width: 100%;
        margin: 0 auto;
        }
    #logo {
        width: 25%;
        }
    #mobil-navigation {
        display: none;
        }
    #hamburger {
        font-size: 2em;
        }
    nav {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 75%;
        }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        }
    nav ul li {
        display: inline-block;
        margin: 1px 0;
        }
    nav ul li a {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1em;
        display: inline-block;
        padding: 5px 10px;
        background-color: #eee;
        }
    #headerbild {
        width: 100%;
        max-height: 385px;
        margin-top: 10px;
        }
@media screen and (max-width: 965px) {
        #haupt-navigation {
           display: none;
           }
        #mobil-navigation {
            display: inline-flex;
            width: calc(100% - 260px);
           }
        #logo {
           width: 260px;
           }
        nav {
           justify-content: flex-end;
           }
        nav ul ul {
           display: none;
           position: absolute;
           right: 0px;
           }
        nav ul li {
           display: block;
           }
        nav ul li:hover ul {
           display: block;
           }
        nav ul li a {
         width: 100%;
         }
    }