updated navbar

css/style.css

@@ -6,107 +6,107 @@ http://www.templatemo.com/tm-490-comila
 
 */
 
-
-nav{
+nav {
   background: rgba(0, 0, 0, 0.7);
   height: 80px;
   width: 100%;
-
-  position: relative;
-
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-label.logo{
+
+label.logo {
   color: white;
   font-size: 35px;
   line-height: 80px;
-  padding: 0 80px;
+  padding: 0 20px;
   font-weight: bold;
+  display: flex;
+  align-items: center;
 }
-label.logo img{
+
+label.logo img {
   height: 68px;
   width: 68px;
-  margin-top:-5px;
+  margin-top: -5px;
   border-radius: 450px;
 }
-nav ul{
-  float: right;
+
+nav ul {
+  display: flex;
   margin-right: 20px;
-  text-decoration: none;
-  transition-duration: 0.9s;
+  list-style: none;
 }
-nav ul li{
+
+nav ul li {
   display: inline-block;
   font-family: 'Josefin Sans', sans-serif;
   line-height: 80px;
   margin: 0 5px;
-  text-decoration: none;
 }
 
 nav ul li a {
   color: rgb(252, 250, 250);
   font-size: 15px;
-  padding: 10px 10px 10px 28px;
+  padding: 10px 28px;
   border-radius: 3px;
-  padding-right: 50px;
   text-transform: uppercase;
   transition: color 1s ease, transform 1s ease;
   text-decoration: none;
 }
+
 i {
   font-size: larger;
   font-weight: 200;
   font-style: normal;
 }
 
-nav ul li  a:hover{ 
-  color:#000000;
-  transform: scale(1.2);     
-
-    background: linear-gradient(to top left, #edfc4890 30%, #f4d01e 20%);
-    margin-left: 30px;
-    margin-right: 30px;
-    transform: translateY(20px);
-
-
+nav ul li a:hover {
+  color: #000000;
+  transform: scale(1.2);
+  background: linear-gradient(to top left, #edfc4890 30%, #f4d01e 20%);
+  margin-left: 30px;
+  margin-right: 30px;
+  transform: translateY(20px);
 }
 
-.navbar nav .checkbut{
+.navbar nav .checkbut {
   font-size: 30px;
   color: white;
-  float: right;
-  line-height: 80px;
-  margin-right: 40px;
-  /* cursor: pointer; */
   display: none;
 }
-#check{
+
+#check {
   display: none;
-} 
-.navbar .fas{
+}
+
+.navbar .fas {
   color: white;
 }
-@media (max-width: 952px){
-  label.logo img{
+
+@media (max-width: 952px) {
+  label.logo img {
     height: 0px;
     width: 0px;
   }
-  label.logo{
+
+  label.logo {
     font-size: 15px;
     padding-left: 50px;
   }
-  nav ul li a{
+
+  nav ul li a {
     font-size: 16px;
-    text-decoration: none;
-
   }
 }
-@media (max-width: 858px){
-  .navbar nav .checkbut{
+
+@media (max-width: 858px) {
+  .navbar nav .checkbut {
     display: block;
     color: white;
   }
 
-  .navbar ul{
+  .navbar ul {
     position: fixed;
     width: 100%;
     height: 100vh;
@@ -117,30 +117,33 @@ nav ul li  a:hover{
     transition: all .5s;
     z-index: 2;
   }
-  .navbar nav ul li{
+
+  .navbar nav ul li {
     display: block;
     margin: 50px 0;
     line-height: 30px;
-    text-decoration: none;
   }
-  .navbar nav ul li a{
+
+  .navbar nav ul li a {
     font-size: 20px;
-    text-decoration: none;
   }
-  a:hover,a.active{
+
+  a:hover, a.active {
     background: none;
     color: #0082e6;
   }
-  #check:checked ~ ul{
+
+  #check:checked ~ ul {
     left: 0;
-
   }
 }
-.navbar section{
+
+.navbar section {
   background: url(bg1.jpg) no-repeat;
   background-size: cover;
   height: 0px;
 }
+
 /* Styles for small screens */
 .containerr {
   margin: 0 auto;