21

index.html

@@ -123,10 +123,10 @@
     <span class="logo">NR</span>
     <nav class="navigation">
       <ul class="nav-links">
-        <li class="link"><a href="#about">Home</a></li>
-        <li class="link"><a href="#about">About</a></li>
-        <li class="link"><a href="#portfolio">Portfolio</a></li>
-        <li class="link"><a href="#contact">Contact</a></li>
+        <li class="nav-link"><a id="link" href="#about">Home</a></li>
+        <li class="nav-link"><a id="link" href="#about">About</a></li>
+        <li class="nav-link"><a id="link" href="#portfolio">Portfolio</a></li>
+        <li class="nav-link"><a id="link" href="#contact">Contact</a></li>
       </ul>
     </nav>
   </header>

styles.css

@@ -54,21 +54,18 @@ section {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 2px solid rgb(204, 216, 170);
+  /* border: 2px solid rgb(204, 216, 170); */
 }
 nav ul{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 nav{
-  border: 2px solid green;
+  /* border: 2px solid green; */
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
-.navigation .nav-links{
-
 }
 nav,
 a {
@@ -84,9 +81,13 @@ a:hover {
   text-decoration: none;
 }
 
-ul {
+header .navigation .nav-links {
   list-style: none;
-  border: 2px solid rgb(218, 64, 141);
+  /* border: 2px solid rgb(218, 64, 141); */
+  /* background: #519E8A; */
+  display: flex;
+  justify-content:center ;
+  align-items: center;
 }
 
 img {
@@ -105,12 +106,31 @@ nav ul li .link {
   height: 45px;
   width: 83px;
 }
-
-
-li {
-  margin: 5px;
+.navigation{
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+li #link{
+  margin: 10px;
+  display:flex ;
+  justify-content: center;
+  align-items: center;
+}
+#link{
+  height: 40px;
+  padding: 15px;
+  margin: 10px;
+  color: #404040;
+
+}
+#link:hover{
+  background: #f3ec85;
+  height: 40px;
+  padding: 15px;
+  margin: 10px;
+}
 footer {
   display: flex;
   /* border: 2px solid; */