Navbar不会中心

Question

这是我编程的第一年，我正在为学校项目做这件事。我们必须做一个响应式网站，并且在尝试向我的网站添加导航栏时我已经遇到了问题。每当我添加它，它只是向左走太多而不会在中间。我试着搜索谷歌寻求帮助，但没有一个工作，所以我想在这里注册询问。提前谢谢！

body {
  background: white none; 
  color: black;
  /* jätetään ylämarginaalia navigointipalkin tilan verran */
  margin-top: 0em;
  /* jätetään vasempaan laitaan marginaalia saman verran kuin
     laitaan tuleva linkkialue vie */
  margin-left: 24.5%;
  padding: 0.5em;
  margin-right: 24.5%;
  margin-top: 10
}
body {
    background-image: url("8.jpg");
}

#logo {
    margin-left: 0px;
    margin-top: -180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: Green;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #89F52B;
}

<ul>
  <li><a href="#home">Etusivu</a></li>
  <li><a href="#games">Pelit</a></li>
  <li><a href="#news">Palaute</a></li>
  <li><a href="#contact">Yhteystiedot</a></li>
  <li><a href="lomake.html">Lomake</a></li>
</ul>

<div id="logo">
<img src=""/>
</div>

Answer 1

如果您希望菜单项位于整个菜单栏的中心，请按照@Pete所说：

li {
    display: inline-block;
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: Green;
   text-align: center; <-----------
}

＆＃13;

＆＃13;

body {
  background: white none; 
  color: black;
  /* jätetään ylämarginaalia navigointipalkin tilan verran */
  margin-top: 0em;
  /* jätetään vasempaan laitaan marginaalia saman verran kuin
     laitaan tuleva linkkialue vie */
  margin-left: 24.5%;
  padding: 0.5em;
  margin-right: 24.5%;
  margin-top: 10
}
body {
    background-image: url("8.jpg");
}

#logo {
    margin-left: 0px;
    margin-top: -180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: Green;
    text-align: center;
}

li {
    display: inline-block;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #89F52B;
}

＆＃13;

<ul>
  <li><a href="#home">Etusivu</a></li>
  <li><a href="#games">Pelit</a></li>
  <li><a href="#news">Palaute</a></li>
  <li><a href="#contact">Yhteystiedot</a></li>
  <li><a href="lomake.html">Lomake</a></li>
</ul>

<div id="logo">
<img src=""/>
</div>

＆＃13;

＆＃13;

＆＃13;