由于某种原因body标签设置溢出到容器div中，p标签中的文本超出容器div边界。我不知道为什么。添加另一个div并应用那里的设置修复了这个问题，但我希望设置应用到容器div中。
我期待一个居中的绿色div，其中的占位符文本像其他元素一样对齐，并且使用body标签作为灰色背景。我该如何解决这个问题？

body {
  width: 100%;
  color: #A4A7A5;
}

div #container {
  color: #63EC91;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}

ul {
  list-style: none;
  background-color: black;
  margin: 20px;
  text-align: center;
  list-style-type: none;
  padding: 20px;
}

li {
  text-align: center;
  font-size: 1.5em;
  font-family: Roboto;
  display: inline;
  color: white;
  padding: 20px;
}

li a {
  text-decoration: none;
  color: lightgrey;
  padding: 20px;
}

li a:hover {
  background-color: lightgreen;
}

#container .FCR {
  width: 20%;
  text-align: center;
  color: lightgrey;
  font-size: 1.5em;
  font-family: Roboto, Arial;
}

p {
  text-align: center;
  color: lightgrey;
  font-size: 0.8em;
  font-family: Roboto, Arial;
}

h1 {
  margin: 20px;
  padding: 0;
  text-align: center;
  color: lightgrey;
  font-size: 1.5em;
  font-family: Roboto, Arial;
}

<div id="container">
  <ul>
    <li><a href="pocetna1.html">Pocetna</a></li>
    <li><a href="onama1.html">O nama</a></li>
    <li><a href="kontakti1.html">Kontakti</a></li>
    <li><a href="galerija1.html">Galerija</a></li>
  </ul>
  <h1>Meni stranica</h1>
  <hr>
  <br>
  <p class="FCR"> FCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCR</p>
</div>