Навигационое меню не на всю ширину
Хотел сделать навигационое меню снизу в итоге получилось так
Потом решил взять еще какой нибудь код с интернета и получилось все так же
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;
}