Question

I am trying to create a menu with HTML and CSS. The menu looks fine, but when i re-size the explorer window, the menu items move EG:

Normal size window:

Below is the CSS:

body{
  padding: 0px;
  margin: 0px;

}

.logo{
    float: left;
}
#menubar{
  height: 90px;
  background-color: red;
  position: relative;
}
.mblinks{
  position: relative;
  height: 90px;
  text-align: center;
}
.mblinks li{
  display: inline;
 }
.mblinks li a{
  padding: 16px 30px;
  color: #fff;
  text-decoration: none;
}

Thanks for your help.

Answer 1

Add some min-width to your menubar

change the css as below

#menubar{
  height: 90px;
  background-color: red;
  min-width: 900px;   /* Give the value as per your need*/
  position: relative;
}