Menu in centered by margin

Demo for https://toster.ru/q/310952

by Gleb Kemarsky

HTML

<div id="container">
  <div id="mainmenu">
    <h1>Header</h1>
    <ul>
      <li><a href="#"><img alt="Link 1"></a></li>
      <li><a href="#"><img alt="Link 2"></a></li>
<!--
      <li><a href="#"><img alt="Link 3"></a></li>
      <li><a href="#"><img alt="Link 4"></a></li>
      <li><a href="#"><img alt="Link 5"></a></li>
//-->
    </ul>
  </div>
</div>

CSS

/* it is given on the condition of the problem */
#container {
  float: left;
  position: relative;
  width: 100%;
}

/* place the menu in the center  */
#mainmenu {
  margin: 0 auto;
  max-width: 120px;
}
#mainmenu li {
  display: inline-block;
}

/* make it adaptive  */
@media (min-width: 480px) {
  #mainmenu { max-width: 220px; }
}
@media (min-width: 640px) {
  #mainmenu { max-width: 320px; }
}
@media (min-width: 768px) {
  #mainmenu { max-width: 420px; }
}

/* beautiful appearance */
img {
  background-color: #ddd;
  height: 40px;
  width: 80px;
}
a:hover img {
  background-color: #d00;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin: 0;
}
#mainmenu {
  background-color: #eee;
  outline: 1px solid #ccc;
  padding: 10px 0 10px 20px;
}
#mainmenu ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
#mainmenu li {
  margin: 10px 20px 0 0;
  padding: 0;
}