Стилизация 5-колоночного нижнего колонтитула

Question

Извините, если это глупый вопрос, я только начинаю изучать HTML, CSS и начальную загрузку.Я пытался получить нижний колонтитул с пятью колонками при загрузке.

До сих пор я достиг пяти столбцов, но после нескольких часов пробовал разные вещи, я отказался.Я не могу понять, как выровнять элементы в этих столбцах.Вы можете увидеть полный сайт здесь: https://stevenarroyave.github.io/UPTAKE/

и репозиторий здесь: https://github.com/stevenarroyave/UPTAKE

Вот как я хочу, чтобы он выглядел: https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing

<footer>
  <div class="col-sm-12 text-left">
    <div class="row">
      <div class="col-sm-7 five-three">
        <div class="row">
          <div class="col-sm-4">
            <img id="logo" class="logo" src="img/FooterLogo.png"></img>
          </div>
          <div class="col-sm-4 text-left">
            <h5 class="text mb-4">UPTAKE</h5>   
            <ul class="list-inline mb-0">  
              <li class="list-inline-item">
                <h5>About us</h5>
              <li class="list-inline-item">
                <h5>Contact Us</h5>
              </li>
              <li class="list-inline-item">
                <h5>Blog</h5>
              </li>
            </ul>
          </div>
        <div class="col-sm-4 text-left">
          <h5 class="text mb-4">HELP</h5> 
          <ul class="list-inline mb-0">  
            <li class="list-inline-item">
              <h5>FAQ</h5>
              <li class="list-inline-item">
                <h5>Tips and suggestions</h5>
              </li>
              <li class="list-inline-item">
                <h5>Customer service</h5>
              </li>
            </ul>
          </div><!-- end inner row -->
        </div>
      </div>
      <div class="col-sm-5 five-two">
        <div class="row">
          <div class="col-sm-6 text-left">
            <h5 class="text mb-4">LEGAL</h5> 
            <ul class="list-inline mb-0">  
              <li class="list-inline-item">
                <h5>Privacy Notice</h5>
                <li class="list-inline-item">
                  <h5>Terms of use</h5>
                </li>
                <li class="list-inline-item">
                  <h5>How to use Uptake</h5>
                </li>
              </ul>
            </div>
            <div class="col-sm-6 text-left">
              <h5 class="text mb-4">LANGUAGE</h5> 
              <ul class="list-inline mb-0"> 
                <li class="list-inline-item">
                  <input type="text" placeholder="English">
                </li>
              </ul>
            </div>
        </div><!-- end inner row -->
      </div>
    </div><!-- end outer row -->
    <div class="row">
      <div class="col-12 text-right">
        <hr>
        <h5>Follow us!</h5>
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-google-plus-g"></i>
        <i class="fab fa-youtube"></i>
        <i class="fab fa-instagram"></i>
      </div>
    </div>
  </div>
</footer>

На данный момент я достиг 5 столбцов, но, как вы можете видеть, все они начинаются на разной высоте, я бы хотел, чтобы они начинались на одной высоте, и чтобы размер логотипа в первом столбце не изменялся при изменении размера.окно.

Я также не знаю, как заставить розовые значки внизу отображать в той же строке рядом с надписью «Следуй за нами!»

Заранее благодарен за любую помощь.

Answer 1

Я нашел ошибку и исправил изменение скриншота с помощью красной стрелки.

И ваш вывод:

Answer 2

Вам необходимо определить выравнивание элемента по базовой линии.Попробуйте это специально для строки нижнего колонтитула.

.row {    align-items: baseline;}