Bitte um Kritik & Verbesserungen

[MrMurphy1]

Hallo

Wie kann ich diesen Aufbau erreichen?

Zum Beispiel zu diesem HTML

   <header class="pageheader">
      <a href="">
         <img src="http://lorempixel.com/250/90/food/5" alt="Logo">
      </a>
      <nav id="navigation" class="main-menu">
         <a href="">Testseite</a>
         <a href="">Testseite 2</a>
      </nav>
   </header>

dieses CSS

   @media all {
      body {
         padding: 0;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      header {
         background-color: blue;
         padding: 0.3rem;
      }
      nav a {
         color: black;
         text-decoration: none;
         outline: none;
         display: block;
         padding: 0.3rem;
      }
   }
   @media only screen and (min-width: 500px) {
      header {
         display: flex;
         align-items: center;
      }
      header>a {
         margin-right: auto;
      }
      header nav {
         display: flex;
         align-items: center;
      }
   }

Der Rest ist ohne Inhalt nur schwer zu beurteilen. Aus dem Bauch raus würde ich das aside-Element außerhalb des main-Elements setzen und auf überflüssige div verzichten.

Gruss

MrMurphy