diff --git a/README.md b/README.md
index cfe57f0..040e483 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@
  * [Seitenstruktur](html/struktur.html)
  * [Kopfbereich](html/header.html)
  * [Formulare](html/formular.html)
+ * [Navigation](html/navigation.html)
 
  ## CSS
  ### CSS Lernen
diff --git a/css/style.css b/css/style.css
index 04f1c5a..cc3ac5d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,7 +20,9 @@ header img{
     padding-top: 62px;
     float: left;
 }
-
+nav ul{
+    margin: 0;
+}
 nav li{
     display: inline;
     line-height: 160px;
diff --git a/html/formular.html b/html/formular.html
index 0c3e7d5..a5dd7ff 100644
--- a/html/formular.html
+++ b/html/formular.html
@@ -6,21 +6,27 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
   <title>Der HEADER in der HTML Struktur</title>
+  <link rel="stylesheet" href="../css/reset.css">
   <link rel="stylesheet" href="../css/code.css">
   <link rel="stylesheet" href="../css/style.css">
 </head>
 
 <body>
   <header>
-    <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
-    <nav role="navigation">
-    </nav>
+    <div class="wrapper">
+      <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
+      <nav role="navigation">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="semantik.html">Semantik</a></li>
+          <li><a href="formulare.html">Formulare</a></li>
+        </ul>
+      </nav>
+    </div>
   </header>
 
-  <main role="main">
-    <header>
+  <main role="main" class="wrapper">
       <h1>HTML Formulare</h1>
-    </header>
     <p>Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen
       Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen,
       Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Absenden der Daten verläuft
@@ -42,7 +48,9 @@
   </main>
 
   <footer>
-    <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
+    <div class="wrapper">
+      <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+    </div>
   </footer>
   <script src="../js/code.js"></script>
 </body>
\ No newline at end of file
diff --git a/html/header.html b/html/header.html
index 4e06a24..4eba91e 100644
--- a/html/header.html
+++ b/html/header.html
@@ -6,16 +6,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
   <title>Der HEADER in der HTML Struktur</title>
+  <link rel="stylesheet" href="../css/reset.css">
   <link rel="stylesheet" href="../css/code.css">
   <link rel="stylesheet" href="../css/style.css">
 </head>
-
 <body>
   <header>
-    <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
+    <div class="wrapper">
+      <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
+      <nav role="navigation">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="semantik.html">Semantik</a></li>
+          <li><a href="formulare.html">Formulare</a></li>
+        </ul>
+      </nav>
+    </div>
   </header>
 
-  <main role="main">
+  <main role="main" class="wrapper">
     <h1>Der HEADER in der HTML Struktur</h1>
     <article>
       <h2>Was gehört in den Kopf der HTML-Datei?</h2>
@@ -52,7 +61,9 @@
   </main>
 
   <footer>
-    <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
+    <div class="wrapper">
+      <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+    </div>
   </footer>
   <script src="../js/code.js"></script>
 </body>
diff --git a/html/semantik.html b/html/semantik.html
index 889acb7..1c6861c 100644
--- a/html/semantik.html
+++ b/html/semantik.html
@@ -6,21 +6,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Die HTML -HEADER Struktur in Webseiten">
     <title>Der HEADER in der HTML Struktur</title>
+    <link rel="stylesheet" href="../css/reset.css">
     <link rel="stylesheet" href="../css/code.css">
     <link rel="stylesheet" href="../css/style.css">
   </head>
 
 <body>
   <header>
-    <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
-    <nav role="navigation">
-    </nav>
+    <div class="wrapper">
+      <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
+      <nav role="navigation">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="semantik.html">Semantik</a></li>
+          <li><a href="formulare.html">Formulare</a></li>
+        </ul>
+      </nav>
+    </div>
   </header>
 
-  <main>
-    <header>
+  <main class="wrapper">
       <h1>HTML Semantische Tags</h1>
-    </header>
     <pre class="line-numbers language-html">
 <code class=" language-html">&#60;abbr&#62; Abbreviation
 &#60;acronym&#62; Acronym
@@ -50,7 +56,9 @@
 </pre>
   </main>
   <footer>
-    <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
+    <div class="wrapper">
+      <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+    </div>
   </footer>
   <script src="../js/code.js"></script>
 </body>
diff --git a/html/struktur.html b/html/struktur.html
index a3909a2..eda65fd 100644
--- a/html/struktur.html
+++ b/html/struktur.html
@@ -16,6 +16,11 @@
     <div class="wrapper">
       <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
       <nav role="navigation">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="semantik.html">Semantik</a></li>
+          <li><a href="formulare.html">Formulare</a></li>
+        </ul>
       </nav>
     </div>
   </header>
diff --git a/index.html b/index.html
index ed9e769..c994352 100644
--- a/index.html
+++ b/index.html
@@ -6,19 +6,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Die HTML Struktur in Webseiten">
   <title>HTML Struktur</title>
+  <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/code.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
   <header>
-    <img src="img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
+    <div class="wrapper">
+    <img src="img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
     <nav role="navigation">
-
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="html/semantik.html">Semantik</a></li>
+        <li><a href="html/formulare.html">Formulare</a></li>
+      </ul>
     </nav>
+  </div>
   </header>
 
-  <main role="main">
+  <main role="main" class="wrapper">
     <h1 id="webdeveloper-links-tips">Webdeveloper Links &amp; Tips</h1>
     <h2 id="html">HTML</h2>
     <h3 id="html-lernen">HTML lernen</h3>
@@ -57,6 +64,7 @@
       <li><a href="html/struktur.html">Seitenstruktur</a></li>
       <li><a href="html/header.html">Kopfbereich</a></li>
       <li><a href="html/formular.html">Formulare</a></li>
+      <li><a href="html/navigation.html">Navigation</a></li>
     </ul>
     <h2>CSS</h2>
     <h3>CSS Lernen</h3>
@@ -83,7 +91,8 @@
   </main>
 
   <footer>
-    <a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a>
+  <div class="wrapper">
+    <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p></div>
   </footer>
-  <script src="../js/code.js"></script>
+  <script src="js/code.js"></script>
 </body>
\ No newline at end of file
