Почему из-за наличия элементов в блоке, эти самые блоки сьезжают?

Question

[tim1427]

<div class="footer">
        <div class="company">
            <p class="comptext">COMPANY</p>

            <img src="img/logo-white.png" alt="">

            <p class="foottxt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem eaque quod, recusandae repudiandae porro totam vel voluptas nostrum nulla accusantium!</p>
        </div>

        
         <div class="links">
            <p class="linktxt">LINKS</p>

            <ul class="list">
                <li>HOME</li>
                <li>ABOUT</li>
                <li>SERVICES</li>
                <li>PROJECTS</li>
                <li>CONTACT US</li>
            </ul>
        </div>
        

    </div>

.footer {
  text-align: center;
  display: inline-block;
  width: 1440px;
  height: 240px;
  background: #141A20;
}

.company {
  text-align: left;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  width: 250px;
  height: 148px;
  margin-top: 42px;
  border:solid red;
.links {
  margin-left: 42px;
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  font-size: 13px;
  width: 250px;
  height: 148px;
  border: solid red;
}
}

Comments

[Ankhena]

Потому что вы используете inline-block и не указываете нужный вам vertical-align. По умолчанию он base-line.
Вот по этой базовой линии всё и выстроилось.

Рекомендация: перейти на гриды и флексы.

И внимательно следите за отступами, правильно задавая нужным элементам padding и margin.

Answer 1

[cssfish]

скорее всего это верхний маржин у linktxt. смотрите в отладчике

Answer 2

[Yulia Khavaeva]

Попробуйте два эти блока засунуть в flexbox контейнер и спозиционируйте их justify-content: space-between;