Как мне выровнять div?

Question

[Виктория Кабишова]

Мне нужно сверстать лендинг и у меня возникли проблемы с этой частью:



А нужно так:

<footer class="line">
            <div container-fluid>
                <div class="container">
                    <div class="row justify-content-md-center">
                        <div class="col col-lg-2">
                            <p class="westline">West Line</p>
                        </div>
                        <div class="col">
                            <div class="col">
                                <p class="main">Главная</p>
                            </div>
                            <div class="col">
                                <p class="catalog">Каталог</p>
                            </div>
                            <div class="col">
                                <p class="company">О компании</p>
                            </div>
                        </div>
                        <div class="col col-lg-2">
                            <p class="zvonok"><u>Заказать звонок</u></p>
                        </div>
                    </div>
                </div>
            </div>
            <br />
        </footer>

Что я делаю не так?

А также я не понимаю как сделать этот шрифт:

Answer 1

[Andrey Vasilev]

flexbox
шрифты
Не думаю, что это шрифт, обычно так над логотипами не извращаются


Одинаковый класс у контейнера для меню и самих элементов, не лучший вариант

<div class="col">
                            <div class="col">
                                <p class="main">Главная</p>
                            </div>
                            <div class="col">
                                <p class="catalog">Каталог</p>
                            </div>
                            <div class="col">
                                <p class="company">О компании</p>
                            </div>
                        </div>

Answer 2

[antanol]

Во-первых, почему вы используете вместо ссылки параграф?! Для ссылок используется тег <a>. Да, даже, если речь идёт о ссылке на кусок той же самой страницы. Вы дали параграфу нужные поведение и внешний вид, но ссылкой он от этого не стал, и вы никуда не перейдёте.

Во-вторых, для логотипов никто не задаёт стили. Из макета вырезается картинка и вставляется на сайт. Либо через <img>, либо через background раздела.

В-третьих, почему вы используете footer? Футер это подвал, а шапка сайта всё-таки обычно наверху. Вам нужен .

В-четвёртых, <div class="col"><div class="col"></div></div> эквивалентен <div class="col col"></div>, если мы говорим о правилах вложенности, и не сработает так, раз речь о бутстрапе. О вложенности бутстрапа можете почитать в официальной документации.

Так работает. Css не использовала, чисто бутстрап

<div class="container-fluid">
  <div class="container">
    <header class="line">
      <div class="row justify-content-md-center">
        <div class="col col-lg-2">
          <a class="westline">West Line</a>
        </div>
        <div class="col">
            <a href="#" class="main">Главная</a>
        </div>
        <div class="col">
            <a href="#" class="catalog">Каталог</a>
        </div>
        <div class="col">
            <a href="#" class="company">О компании</a>
        </div>
        <div class="col col-lg-2">
          <a href="#" class="zvonok">Заказать звонок</a>
        </div>
      </div>
    </header>
  </div>
</div>

А ещё лучше использовать песочницы вроде codepen.io и тестить там нерабочие куски, и их же кидать людям.
Например, вот по вашему примеру (и там же внизу рабочий результат показан):
https://codepen.io/antanol/pen/qBZWGXQ