The problem is with images that do not respond to display changes in the code, i.e. so that they are in one line and on the same level in a common row, but when using inline-block in conjunction with flex, the blocks are moved, since they have a strange "wall" on the right:
I used many options for display, such as inline-block, block, and flex. In fact, it's this indentation that gets in the way, but it doesn't get removed in any way. The problem is not solved. I can't find a solution anywhere.
This is how it looks in general:
and it is necessary that everything is arranged horizontally, in a row (on the same level).
.bottom {
margin: 0 auto;
width: 1440px;
height: 85px;
background: #1D0E2D;
border-radius: 25px;
opacity: 80%;
margin-top: 90px;
margin-bottom: 74px;
}
.social {
display: flex;
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
display: inline-block;
}
.money {
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
}
.social-block {
display: flex;
align-items: center;
}
.social-block img {
display: inline-block;
}
.bottom img {
max-width: 36px;
margin-left: 12px;
}
<div class="bottom">
<div class="botblock">
<a class="logo-bottom" href="">
<span class="pro">PRO<span class="white">moblox</span></span>
</a>
<div class="social-block">
<span class="social">Мы в социальных сетях: </span>
<div class="disc">
<a class="DISCORD" href="#">
<img src="CSS/img/disc.png" alt="">
</a>
</div>
<div class="telega">
<a class="TELEGRAM" href="#">
<img src="CSS/img/teleg.png" alt="">
</a>
</div>
<div class="vkont">
<a class="VK" href="#">
<img src="CSS/img/vk.png" alt="">
</a>
</div>
</div>
<div class="email-block">
<span class="money">Для сотрудничества: </span>
<a class="EMAIL" href="#">
<img src="CSS/img/gmail.png" alt="">
</a>
</div>
</div>
</div>
The problem is with images that do not respond to display changes in the code, i.e. so that they are in one line and on the same level in a common row, but when using inline-block in conjunction with flex, the blocks are moved, since they have a strange "wall" on the right:
I used many options for display, such as inline-block, block, and flex. In fact, it's this indentation that gets in the way, but it doesn't get removed in any way. The problem is not solved. I can't find a solution anywhere.
This is how it looks in general:
and it is necessary that everything is arranged horizontally, in a row (on the same level).
.bottom {
margin: 0 auto;
width: 1440px;
height: 85px;
background: #1D0E2D;
border-radius: 25px;
opacity: 80%;
margin-top: 90px;
margin-bottom: 74px;
}
.social {
display: flex;
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
display: inline-block;
}
.money {
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
}
.social-block {
display: flex;
align-items: center;
}
.social-block img {
display: inline-block;
}
.bottom img {
max-width: 36px;
margin-left: 12px;
}
<div class="bottom">
<div class="botblock">
<a class="logo-bottom" href="">
<span class="pro">PRO<span class="white">moblox</span></span>
</a>
<div class="social-block">
<span class="social">Мы в социальных сетях: </span>
<div class="disc">
<a class="DISCORD" href="#">
<img src="CSS/img/disc.png" alt="">
</a>
</div>
<div class="telega">
<a class="TELEGRAM" href="#">
<img src="CSS/img/teleg.png" alt="">
</a>
</div>
<div class="vkont">
<a class="VK" href="#">
<img src="CSS/img/vk.png" alt="">
</a>
</div>
</div>
<div class="email-block">
<span class="money">Для сотрудничества: </span>
<a class="EMAIL" href="#">
<img src="CSS/img/gmail.png" alt="">
</a>
</div>
</div>
</div>
1 Answer
Reset to default 1In css, set .botblock to be flex to get everything on one line. Then pick a justify-content value that aligns things horizontally the way you like.
.bottom {
margin: 0 auto;
width: 1440px;
height: 85px;
background: #1D0E2D;
border-radius: 25px;
opacity: 80%;
margin-top: 90px;
margin-bottom: 74px;
}
/* EDIT Add flex settings to .botblock */
.botblock {
display: flex;
justify-content: space-evenly;
}
.social {
display: flex;
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
display: inline-block;
}
.money {
color: white;
font-family: 'SF pro display';
font-weight: medium;
font-size: 20px;
}
.social-block {
display: flex;
align-items: center;
}
.social-block img {
display: inline-block;
}
.bottom img {
max-width: 36px;
margin-left: 12px;
}<div class="bottom">
<div class="botblock">
<a class="logo-bottom" href="">
<span class="pro">PRO<span class="white">moblox</span></span>
</a>
<div class="social-block">
<span class="social">Мы в социальных сетях: </span>
<div class="disc">
<a class="DISCORD" href="#">
<!-- EDIT For code snippet -->
<!-- <img src="CSS/img/disc.png" alt=""> -->
<img src="https://placebear/32/32.jpg" alt="">
</a>
</div>
<div class="telega">
<a class="TELEGRAM" href="#">
<!-- EDIT For code snippet -->
<!-- <img src="CSS/img/teleg.png" alt=""> -->
<img src="https://placebear/33/32.jpg" alt="">
</a>
</div>
<div class="vkont">
<a class="VK" href="#">
<!-- EDIT For code snippet -->
<!-- <img src="CSS/img/vk.png" alt=""> -->
<img src="https://placebear/34/32.jpg" alt="">
</a>
</div>
</div>
<div class="email-block">
<span class="money">Для сотрудничества: </span>
<a class="EMAIL" href="#">
<!-- EDIT For code snippet -->
<!-- <img src="CSS/img/gmail.png" alt=""> -->
<img src="https://placebear/35/32.jpg" alt="">
</a>
</div>
</div>
</div>