Как центрировать CSS меню для iPhone и всех веб-браузеров

Question

Я использую меню css для своего веб-сайта, и меню перемещается при использовании MacBook, iPad разных iPhone, поэтому иногда они не центрируются на экране.На данный момент меню действительно разворачивается, образуя два слоя меню, если экран меньше, но они не центрированы на экране.Я немного запутался в своем текущем коде, что нужно изменить, чтобы пункты меню всегда были в центре, независимо от того, на каком экране они просматриваются.Буду признателен за любую помощь, так как я не профессиональный кодер.

Здесь у меня шесть меню, три с подменю и три с прямыми ссылками на страницы.

<!-- Start css3menu.com BODY section -->
<ul  id="css3menu0"  class="topmenu">
    <li  class="topfirst"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu1</span></a>
        <ul  style="width: 145px;">
              <li><a  href="subpage1a.html">subMenu1a </a></li>
              <li><a  href="subpage1b.html">subMenu1b </a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu2</span></a>
            <ul  style="width: 145px;">
              <li><a  href="subpage2a.html"> subMenu2a</a></li>
              <li><a  href="subpage2b.html"> subMenu2b</a></li>
              <li><a  href="subpage2c.html"> subMenu2c</a></li>
              <li><a  href="subpage2d.html"> subMenu2d</a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="page3.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu3</a></li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu4</span></a>
          <ul  style="width: 145px;">
              <li><a  href="subpage4a.html"> subMenu4a</a></li>
              <li><a  href="subpage4b.html"> subMenu4b</li>
              <li><a  href="subpage4c.html"> subMenu4c</a></li>
          </ul>
     </li>
     <li  class="topmenu"><a  target="_blank"  href="https://www.instagram.com/xxx/" style="width: 130px; height: 15px; line-height: 15px;">Instagram</a></li>
     <li  class="toplast"><a  href="page6.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu6</a></li>
</ul>
<p  class="_css3m"><a  href="http://css3menu.com/">Creating CSS Menu Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

на данный момент позиционирование менюсдвиг в соответствии с ожидаемой шириной экрана, и на меньших экранах (например, iPhone) меню переносится на две строки.Проблема в том, что они не центрируются на экране.

Answer 1

Создайте контейнер и:

.container{
display: flex;
justify-content: center;
}