Margin in Display: Inline

[MrMurphy1]

Hallo

ich weiß nicht ob ich den Problem richtig verstanden habe. Probier mal folgendes aus.

Zunächst das zweite (schließende) h1-Tag reparieren:

<h1>HomeWorker</h1>

In deinem Quelltext fehlt der Schrägstrich (slash).

Und dann folgendes CSS:

      * {
         margin: 0;
         padding: 0;
      }
      .site {
         /*width: auto;*/
         /*margin-left: auto;*/
         /*margin-right: auto;*/
         font-family: "Open Sans";
      }
      header {
         /*width: auto;*/
         /*height: 50px;*/
         background-color: lightgreen;
      }
      .header {
         width: 1000px;
         /*height: 50px;*/
         background-color: green;
         margin-left: auto;
         margin-right: auto;

         display: flex;
      }
      .header h1 {
         color: white;
         /*display: inline;*/
         background-color: orange;
      }
      .header p {
         color: grey;
         /*display: inline;*/
         margin-left: 3px;
         margin-right: 3px;
         font-size: 20px;
      }
      .menu {
         /*display: inline;*/
         /*margin-left: 30px;*/
         /*margin-top: -15px;*/

         display: flex;
         align-items: center;
      }
      section {
         height: 1000px;
         background-color: lightblue;
      }
      footer {
         height: 50px;
         background-color: lightgrey;
      }

Was gelöscht werden kann/soll habe ich auskommentiert. Neue CSS-Anweisungen nach einer Leerzeile hinzugefügt.

Mir ging es nur um dein Problem. Andere "Problemfelder" habe ich außen vor gelassen.

Gruss

MrMurphy