Выстроить колонки в ряд на сайте в футере

Question

При вёрстке моего сайта у меня возникла проблема. Я не могу выстроить в ряд колонки в футере и ничего не могу с этим поделать.

Вот отрывок кода HTML и CSS

.site-menu__sections {
display: flex;
justify-content: space-between;
}

   <footer class="footer">
      <div class="container footer__container">
        <nav class="site-menu">
          <ul class="site-menu__sections">
            <li class="site-menu__col">
              <h3 class="site-menu__title">Info</h3>
              <ul class="site-menu__list">
                <li class="site-menu__item">
                  <a href="#" class="site-menu__link">About fingerboards</a>
                <li class="site-menu__item">
                  <a href="#" class="site-menu__link">How to make a site?</a>
                <li class="site-menu__item">
                  <a href="#" class="site-menu__link">How to learn CSS?</a>
                <li class="site-menu__item">
                  <a href="#" class="site-menu__link">How to learn HTML?</a>
                <li class="site-menu__item">
                  <a href="#" class="site-menu__link">About myself</a>
                <h3 class="site-menu__title">Fingerboards</h3>
                <ul class="site-menu__list">
                  <li class="site-menu__item">
                    <a href="#" class="site-menu__link">About fingerboards</a>
                  <li class="site-menu__item">
                    <a href="#" class="site-menu__link">How to make a site?</a>
                  <li class="site-menu__item">
                    <a href="#" class="site-menu__link">How to learn CSS?</a>
                  <li class="site-menu__item">
                    <a href="#" class="site-menu__link">How to learn HTML</a>
                  <li class="site-menu__item">
                    <a href="#" class="site-menu__link">About myself</a>
                  <h3 class="site-menu__title">Site</h3>
                  <ul class="site-menu__list">
                    <li class="site-menu__item">
                      <a href="#" class="site-menu__link">About site</a>
                    <li class="site-menu__item">
                      <a href="#" class="site-menu__link">How to make a site?</a>
                    <li class="site-menu__item">
                      <a href="#" class="site-menu__link">How to learn CSS?</a>
                    <li class="site-menu__item">
                      <a href="#" class="site-menu__link">How to learn HTML</a>
                    <li class="site-menu__item">
                      <a href="#" class="site-menu__link">About myself</a>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </footer>

Answer 1

Не нужно бездумно копипастить. И не ленитесь закрывать теги.

Также, отсутствовало свойство flex-flow: row nowrap;:

.site-menu__sections {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

<footer class="footer">
  <div class="container footer__container">
    <nav class="site-menu">
      <ul class="site-menu__sections">
        <li class="site-menu__col">
          <h3 class="site-menu__title">Info</h3>
          <ul class="site-menu__list">
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About fingerboards</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to make a site?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn CSS?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn HTML?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About myself</a></li>
          </ul>
        </li>

        <li class="site-menu__col">
          <h3 class="site-menu__title">Fingerboards</h3>
          <ul class="site-menu__list">
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About fingerboards</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to make a site?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn CSS?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn HTML</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About myself</a></li>
          </ul>
        </li>

        <li class="site-menu__col">
          <h3 class="site-menu__title">Site</h3>
          <ul class="site-menu__list">
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About site</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to make a site?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn CSS?</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">How to learn HTML</a></li>
            <li class="site-menu__item">
              <a href="#" class="site-menu__link">About myself</a></li>
          </ul>
        </li>
        </li>
      </ul>
    </nav>
  </div>
</footer>

БЛОГ НА HUSL

Выстроить колонки в ряд на сайте в футере

Ответы (1 шт):