Пробел между ссылками в навигации

Question

Я сделал горизонтальную навигацию, но я хочу, чтобы между левой и правой связью было свободное пространство. мой сайт Я не могу понять, как это сделать. Это мои HTML и CSS:

.navigation-homepage ul,
a {
  font-family: arial, sans-serif;
  font-size: 42px;
  list-style-type: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

<div class="navigation-homepage">
  <ul>
    <li> <a href="index.html" style="text-decoration: none"> Home </a> <br> </li>
    <li> <a href="collection.html" style="text-decoration: none"> Collection </a> <br> </li>
    <li> <a href="about%20this%20website.html" style="text-decoration: none"> About this website </a> <br> </li>
  </ul>
</div>

Заранее спасибо: -)

Answer 1

Вы можете добавить поле слева и справа от контейнера:

.navigation-homepage ul, a {
  font-family: arial, sans-serif;
  font-size: 42px;
  list-style-type: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

.navigation-homepage {
  margin: 0 20px;
}

<div class="navigation-homepage">
  <ul>
    <li> <a href="index.html" style="text-decoration: none"> Home </a> <br> </li>
    <li> <a href="collection.html" style="text-decoration: none"> Collection </a> <br> </li>
    <li> <a href="about%20this%20website.html" style="text-decoration: none"> About this website </a> <br> </li>
  </ul>
</div>