Update static/MenuStyle.css

static/MenuStyle.css

@@ -1,23 +1,34 @@
 
 /********************************************************************/
 /* Style the tab */
+
 .tab {
-  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px; /* Adds spacing between elements */
+    overflow: hidden;
   /* border: 1px solid black; */
   background-color:black;
-  font-family: "acumin-pro", sans-serif;
+  /* font-family: "acumin-pro", sans-serif; */
 }
-.tab .dropbtn{
-  float:right
-}
-.tablinks{
+
+.tablinks {
   color:white;
   font-size: 18px;
+  text-decoration: none;
+  padding: 10px;
+  /* font-weight: bold; */
+  /* color: #000; */
+  /* background-color: #f0f0f0; */
+  border: none;
+  cursor: pointer;
+  font-family: Arial, sans-serif;
 }
 /* Style the buttons that are used to open the tab content */
 .tab button {
   background-color: inherit;
-  float: left;
+  /* float: left; */
   border: none;
   outline: none;
   cursor: pointer;
@@ -45,6 +56,17 @@
 }
 /*********************************************************************/
 
+.tab .dropbtn{
+  /* float:right; */
+  margin-left: auto; /* Pushes the button to the right */
+  background-color: inherit;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+}
+
 .container {
   /* display: inline-block; */
   cursor: pointer;
@@ -141,7 +163,7 @@ cursor: pointer;
     position: absolute;
     right: 0;
     top: 0;
-    margin-top: 57px;
+    margin-top: 45px;
     background-color: #f9f9f9;
     min-width: 160px;
     max-width: 36%;
@@ -188,4 +210,4 @@ cursor: pointer;
   margin-bottom: -10px;
   
   /* margin-left: -200px; */
-}
+}