Probleme im header und mit der Breite

[Kralle]

Moin,

Body ist flex. Habe ich alles hier von der Homepage.

body {
	margin: 0 auto;
	max-width: 60em;
	display: flex;
  	flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, article, section, aside, footer {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        flex: 1 100%;
      }

      header {
        background: #F1F3F4;
        border-color: #d5d5d5;
        display: flex;
        flex-flow: row wrap;
      }
      header * {
        flex: 1 1 0%;
      }
      header img {
        flex: 1 0 12em;
        margin-right: 20px;
      }

      header div {
        flex: 3 0 ;
        margin-right: 20px;
      }
      header nav {
        flex: 1 1 100%;
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: flex;
        flex-direction: column;
      }
      nav li {
        list-style-type:none;
        margin: 1.2em 0;
        flex: 1 1 100%;
      }
      nav a {
        display: inline-block;
        width: 95%;
        background: #fffbf0;
        border: 1px solid #dfac20;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover, nav a:focus {
        background-color: #dfac20;
      }
      section {
        background: #F1F3F4;
        border-color: slateblue;
      }
      article {
        background: #ffede0;
        border-color: #df6c20;
      }
      aside {
        background: #ebf5d7;
        border-color: #8db243;
      }
      footer {
        background: #e4ebf2;
        border-color: #8a9da8;
        display: flex;
        flex-flow: row wrap;
      }
      footer * {
        flex: 1 1 0%;
        justify-content: space-between;
      }
      footer p {
        text-align: right;
      }

/* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
		flex: 0 0 12em;  
        margin-right: 50px;
      }
      nav ul {
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        flex: 1 1 0%;
      }
      article {
        order: 2;
      }
      #news {
        order: 3;
      }
      aside {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        flex: 1 1 auto;
        order: 4;
      }
      footer {
        order: 5;
      }
      }

/* Large screens */
     @media all and (min-width: 50em) {
     article {
        /* Der Article wird 2.5x so breit wie die beiden asides! */
        order: 3;
        flex: 5 1 0%;
      }
      aside {
        flex: 2 1 0%;
      }
      #news {
        order: 2;
        align-self: center;
        height: 120px;
      }
      }

UTF-8 is hard.

Was willst Du mir damit sagen?

Gruß HEiko