add task solution

src/style.css

@@ -1,93 +1,66 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 body {
-  font-family: Roboto, sans-serif;
+  margin: 0;
   font-size: 12px;
-
-  --blue-color: #00acdc;
+  font-family: Roboto, sans-serif;
 }
 
 .header {
+  padding: 0 50px;
+
   display: flex;
-  width: 100%;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 50px;
+  justify-content: space-between;
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+}
+
+.nav {
+  flex-shrink: 0;
 }
 
 .nav__list {
-  list-style-type: none;
-  display: flex;
-  padding: 0;
+  list-style: none;
+
   margin: 0;
-  justify-content: flex-end;
+  padding: 0;
+  display: flex;
 }
 
 .nav__item {
-  display: inline-block;
-  margin-right: 20px;
-}
-
-.nav__item:last-child {
-  margin-right: 0;
+  position: relative;
 }
 
 .nav__link {
-  text-transform: uppercase;
-  text-decoration: none;
-  color: black;
-  font-style: normal;
+  color: #000;
+  display: block;
   font-weight: 500;
-  height: 60px;
   line-height: 60px;
-  display: flex;
-  align-items: center;
-  position: relative;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.nav__item:not(:last-child) {
+  margin-right: 20px;
+}
+
+.nav__link:hover {
+  color: #00acdc;
 }
 
 .is-active {
   color: #00acdc;
-  position: relative;
 }
 
 .is-active::after {
-  content: '';
-  display: block;
-  background-color: #00acdc;
-  text-align: center;
-  height: 4px;
-  width: 100%;
-  border-radius: 8px;
-  bottom: 0;
   position: absolute;
-  left: 0;
-}
-
-[data-qa_hover]::after {
+  bottom: 0;
   content: '';
   display: block;
-  background-color: #00acdc;
-  text-align: center;
+  width: 100%;
   height: 4px;
   border-radius: 8px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-
-.nav__link:hover {
-  color: #00acdc;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
+  background-color: #00acdc;
 }