当更改“显示”时，将块排列在一列中，并且边距不断显示在右

Question

问题是在不响应代码中显示更改的图像，即，以使它们处于一行，并且在公共行中处于同一级别，但是当使用Inline-Block与Flex结合使用时，将移动块，因为他们的右边有一个奇怪的“墙”：

我使用了许多显示选项，例如内联块，块和Flex。 实际上，正是这种压痕阻碍了这种凹痕，但不会以任何方式被删除。 问题无法解决。我在任何地方都找不到解决方案。

这是一般的外观：

有必要在一排（在同一级别上）水平排列。

.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>

Answer 1

.botblock

将所有内容都放在一行上。然后选择一个以您喜欢的方式对齐事物的值。

flex

justify-content