Problem z wycentrowaniem menu rozwijanego, HTML/CSS

Question

Dzień dobry, od ponad 45 minut męczę się z wycentrowaniem menu rozwijanego na stronie - jedyne co mi działa, to zrobienie tego za pomocą "margin-left x%", ale to nie ma sensu, bo ktoś odpali stronę na telefonie/laptopie/czymkolwiek innym i już będzie widział, że to jest krzywo. Bardzo proszę o pomoc, jestem totalnym warzywem w te klocki, a potrzebuję wykonać prostą stronę z menu na zaliczenie. Nie musi to wyglądać nie wiadomo jak pięknie, ważne, by u każdego było na środku, pod bannerem. Pozdrawiam i z góry dziękuję.
Menu jest zbudowane tak:

        <div id="menu">
            <ol>
            <li><a href="na 5.html">Strona główna</a></li>
            <li><a href="#">Szkoła</a>                           
                <ul>
                    <li><a href="#">Dyrekcja</a></li>
                    <li><a href="#">Nauczyciele</a></li>
                    <li><a href="#">Historia</a></li>               
                </ul></li>
            <li><a href="#">Uczniowie</a>
                <ul>
                    <li><a href="#">Samorząd uczniowski</a></li>
                    <li><a href="#">Dziennik elektroniczny</a></li>
                    <li><a href="#">Sukcesy</a></li>
                    <li><a href="#">Szczęśliwy numerek</a></li>         
                </ul></li>
            <li><a href="#">Archiwum</a>
                <ul>
                    <li><a href="#">2017</a></li>
                    <li><a href="#">2016</a></li>             
                </ul></li>
            <li><a href="#">Kontakt</a></li>
                </ol>
           </div

a styl do niego tak:

ol {
  list-style-type:none;
  padding:0;
  margin:0;
  font-size:17px;
  line-height:2em;
  text-align:center;
}

ol > li {
  float:left;
  background-color:#000;
  width:280.4px;
  text-align:center;
}

ol a {
  display:block;
  color:#CECECE;
  text-decoration:none;
  padding:0 5px;
}

ol > li:hover > a {
  color:#FFF;
}

ol > li:hover {
  background-color:#327DFF;
}

ol > li > ul {
  list-style-type:none;
  padding:0;
  margin:0;
}




ol > li > ul > li {
  background-color:#A0A0A0;
}

ol > li > ul > li:hover {
  background-color:#BBB;
}

ol > li > ul > li:hover a {
  color:#09C;
}

ol > li > ul {
  display:none;
}

ol > li:hover > ul {
  display:block;
}

#menu {
    margin-left: 13.1%;
}

Answer 1

Zamiast margin-left: x% w CSS divowi 'menu' musisz nadać szerokość (w Twoim przypadku coś ok. 1405px, ale sprawdź dokładnie), a następnie dodać margin: 0 auto;