html - When the "display" is changed, the blocks are arranged in a column, and the margins are constantly disp

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>

• html
• css

Share Follow edited Feb 1 at 13:14 Temani Afif 275k2828 gold badges366366 silver badges486486 bronze badges asked Feb 1 at 13:12 RoDeZRoDeZ 7511 silver badge66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In 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.com/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.com/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.com/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.com/35/32.jpg" alt="">
      </a>

    </div>

  </div>
</div>