Навигационое меню не на всю ширину

Хотел сделать навигационое меню снизу в итоге получилось такПолучилось так Потом решил взять еще какой нибудь код с интернета и получилось все так же

body {
  background-color: rgb(255, 255, 255);
  background: url('/img/bitva.jpg') no-repeat center center fixed;
  background-size: cover;
  background-position: center;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

ul {
  text-align: center;
  list-style-type: none;
  padding: 0px;
}

a {
  color: rgb(119, 238, 21);
  text-decoration: none;
}

li {
  display: inline;
  margin-right: 100px;
}

.ferma {
  margin-left: 25px;
}

.modpack {
  margin-left: 20px;
}

.modpacks {
  width: 170px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .left,
.wrapper .center,
.wrapper .right {
  border: 1px solid red;
}

.modpack {
  margin-left: 20px;
}

.modpacks {
  width: 170px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.wrapper .item {
  width: 100%;
  border: 1px solid red;
}

.wrapper .item img {
  display: block;
  width: 100%;
}

.wrapper .item h3 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  color: aqua;
}

.menu {
  position: fixed;
  bottom: 0px;
  width: 100%;
  display: table;
}

.menu ul {
  display: table-row;
}

.menu li {
  display: table-cell;
  background: #252b30;
}

.menu ul li:hover,
.menu a:hover {
  background: #666;
}

.menu li a {
  display: block;
  padding: 8px 15px;
  color: #fff;
  text-align: center;
}
<header>
  <img class="logo" src="img/hqdefault.jpg" alt="Логотип">
</header>
<nav>
  <ul>
    <li> <a href="https://minecraft-inside.ru/mods/?ysclid=lrglyx5fm1690737887">МОДЫ</a></li>
    <li> <a href="https://minecraft-inside.ru/modpacks/?ysclid=lrglz5tm6y628404644">МОДПАКИ</a></li>
    <li> <a href="https://minecraftz.ru/24-luchshih-fermy-minecraft-iyul-2023/?ysclid=lrglzew4qv526681098">ФЕРМЫ</a></li>
    <li> <a href="https://vk.com/killershademon">ЗА ПОМОЩЬЮ</a></li>
  </ul>

</nav>
<main>
  <section class="section-about-1">
  </section>
</main>
<footer>
  <nav></nav>
</footer>

<div class="wrapper">
  <div class="item">
    <img src="img/мобы.jpg" alt="Left image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
  <div class="item">
    <img src="img/модпаки.jpg" alt="Center image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
  <div class="item">
    <img src="img/ферма.jpg" alt="Right image">
    <h3>Модифика́ция (англ. Modification, сокращённо мод (англ. Mod)) — это дополнение от сторонних разработчиков, которое изменяет или дополняет оригинальный контент Minecraft.</h3>
  </div>
</div>


<div class="menu">
  <ul>
    <li> <a href="https://minecraft-inside.ru/mods/?ysclid=lrglyx5fm1690737887">ТЕХ.ПОДДЕРЖКА</a></li>
    <li> <a href="https://minecraft-inside.ru/modpacks/?ysclid=lrglz5tm6y628404644">DISCORD</a></li>
    <li> <a href="https://minecraftz.ru/24-luchshih-fermy-minecraft-iyul-2023/?ysclid=lrglzew4qv526681098">TELEGRAM</a></li>
    <li> <a href="https://vk.com/killershademon">VK</a></li>
  </ul>
</div>


Ответы (1 шт):

Автор решения: nais2008

Изначально у всех элементов имеется margin, его надо обнулить

*{
  margin:0;
  padding:0;
}
→ Ссылка