arrumado menu lateral

contato.html

@@ -14,9 +14,9 @@
             <ul>
                 <li><img src="resources/img.jpg" alt="Eu"><p class="image-description">Eduardo Paludo</p></li>
                 <hr class="solid">
-                <li><a href="index.html">Sobre mim</a></li>
-                <li><a href="projetos.html">Projetos</a></li>
-                <li class="current-page">Contato</li>
+                <li><a href="index.html"><span>Sobre mim</span></a></li>
+                <li><a href="projetos.html"><span>Projetos</span></a></li>
+                <li><span class="current-page">Contato</span></li>
             </ul>
         </nav>
         <main>

index.html

@@ -14,9 +14,9 @@
             <ul>
                 <li><img src="resources/img.jpg" alt="Eu"><p class="image-description">Eduardo Paludo</p></li>
                 <hr class="solid">
-                <li class="current-page">Sobre mim</li>
-                <li><a href="projetos.html">Projetos</a></li>
-                <li><a href="contato.html">Contato</a></li>
+                <li><span class="current-page">Sobre mim</span></li>
+                <li><a href="projetos.html"><span>Projetos</span></a></li>
+                <li><a href="contato.html"><span>Contato</span></a></li>
             </ul>
         </nav>
         <main>

projetos.html

@@ -14,9 +14,9 @@
             <ul>
                 <li><img src="resources/img.jpg" alt="Eu"><p class="image-description">Eduardo Paludo</p></li>
                 <hr class="solid">
-                <li><a href="index.html">Sobre mim</a></li>
-                <li class="current-page">Projetos</li>
-                <li><a href="contato.html">Contato</a></li>
+                <li><a href="index.html"><span>Sobre mim</span></a></li>
+                <li><span class="current-page">Projetos</span></li>
+                <li><a href="contato.html"><span>Contato</span></a></li>
             </ul>
         </nav>
         <main>

resources/styles.css

 body {
     display: flex;
-    text-justify: auto;
     margin: 0;
     padding: 0;
     flex-direction: row;
@@ -18,12 +17,18 @@ nav {
 
 nav ul {
 	list-style-type: none;
-	padding: 0;
+    padding: 0;
+}
+
+nav span {
+    display: inline-block;
+    width: 100%;
+    border-radius: 4px;
+    padding: 12px;
 }
 
 nav ul li {
     margin-bottom: 20px;
-    padding: 10px 12px;
     text-align: center;
 }
 
@@ -37,24 +42,32 @@ nav li img {
     margin-top: 40px;
 }
 
+p.image-description {
+    text-align: center;
+    color: azure;
+    margin-top: 10px;
+    margin-bottom: 30px;
+}
+
 nav li a {
-    padding: 10px 12px;
-    border-radius: 4px;
     text-decoration: none;
     color: azure;
 }
 
-nav li.current-page {
-    border-radius: 4px;
+nav span.current-page {
     color: black;
     background-color: azure;
 }
 
-nav li a:hover {
-    padding: 10px 12px;
+nav span:hover:not(.current-page) {
 	background-color: #555;
 }
 
+hr.solid {
+    border-top: 3px solid white;
+    padding: 12px;
+}
+
 main {
     flex: 4;
     background-color: #3e3e42;
@@ -67,19 +80,7 @@ p {
     text-align: justify;
 }
 
-p.image-description {
-    text-align: center;
-    color: azure;
-    margin-top: 10px;
-}
-
 p a {
     text-decoration: none;
     color: cornflowerblue;
-    
-}
-
-hr.solid {
-    border-top: 3px solid white;
-    padding: 12px;
 }
\ No newline at end of file