repositioning the sereach bar

css/style.css

@@ -181,7 +181,23 @@ header{
     text-decoration: none;
     font-size: 17px;
   }*/
-  
+  form {
+    background-color: hsl(0, 0%, 100%);
+    width: 300px;
+    height: 44px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  input {
+    all: unset;
+    font: 16px system-ui;
+    color: #fff;
+    height: 100%;
+    width: 100%;
+    padding: 6px 10px;
+  }
   .navbar :hover {
     background-color: #ddd;
     color: black;
@@ -211,7 +227,7 @@ header{
   }
   
   .navbar .sebtn:hover {
-    background: #ccc;
+    background: #eceaea;
   }
   .navbar input[type=text], .navbar .sebtn {
     float: none;
@@ -280,7 +296,7 @@ ul li{
 .container ul li:hover{
     opacity: 0.5;
 }
-.bottom{
+/*.bottom{
     width:400%;;
     height:50px;
     display: block;
@@ -294,7 +310,7 @@ ul li{
     font-size: 20px;
     position: relative;
     
-}
+}*/
 
 /*----------------men page ----------------*/
 

index.html

@@ -59,7 +59,7 @@
                         </ul>
                       </li>
                       <div class="search-container">
-                        <form action="/action_page.php">
+                        <form action="#">
                           <input type="text" placeholder="Search.." name="search">
                           <button class="sebtn" type="submit"><i class="fa fa-search"></i></button>
                         </form>