Adjusted the menu

css/styles.css

@@ -47,26 +47,20 @@ h1, h2, h3, h4, h5, p {
   outline: 0;
   text-decoration: none;
   z-index: 1;
+  background-color: black;
+  box-shadow: 0 0 0.5em black;
 }
 
 #nav-mini .menu {
   display: none;
-  box-shadow: 0 0 0.5em black;
   background-color: black;
-  margin-left: 0.5em;
+  margin: 48px 48px 48px 48px;
 }
 
 #nav-mini .menu a {
-  text-align: left;
-  padding: 1em 2em;
-}
-
-#nav-mini .menu .first {
-  padding-top: 1.5em;
-}
-
-#nav-mini .menu .last {
-  padding-bottom: 1.5em;
+  text-align: center;
+  padding: 1em 0 1em 0;
+  border-bottom: 0.1em solid gray;
 }
 
 #nav-mini .menu a:hover {
@@ -81,7 +75,6 @@ h1, h2, h3, h4, h5, p {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 50%;
-  box-shadow: 0 0 0.5em black;
   cursor: pointer;
   float: left;
 }
@@ -93,7 +86,6 @@ h1, h2, h3, h4, h5, p {
 
 #nav-ctrl:checked + label {
   filter: invert(100%);
-  box-shadow: 0 0 0.5em white;
   background-image: url("../img/close.svg");
   background-size: 25%;
 }
@@ -104,7 +96,7 @@ h1, h2, h3, h4, h5, p {
 } */
 
 #nav-ctrl:checked + label + .menu {
-  display: inline-block;
+  display: block;
 }
 
 #nav a:hover {

index.html

@@ -25,11 +25,11 @@
       <input type="checkbox" id="nav-ctrl"/>
       <label for="nav-ctrl"></label>
       <div class="menu">
-        <a href="#home" class="first">Home</a>
+        <a href="#home">Home</a>
         <a href="#about">About</a>
         <a href="#experience">Experience</a>
         <a href="#education">Education</a>
-        <a href="#contact" class="last">Contact</a>
+        <a href="#contact">Contact</a>
       </div>
     </nav>
     <div id="home">