Проблема с отображением контента в row column при использовании сетки FlexBoxGrid2

Question

Делаю проект на сетке FlexBoxGrid2, добрался до footer, но не могу понять как упорядочить контент в нужном мне виде. Макет (как должно быть) приложен, мой код также прилагаю. Все перепробовал, пока результата нет. Спасибо.

.header_container {
  max-width: 1124px;
  height: 72px;
  padding: 0 55px 0 55px;
  margin: 0 auto;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 0px 0px 16px 0px #26262629;
}
.header_container:after {
  content: "";
  display: table;
  clear: both;
}
.logo {
  float: left;
  width: 119.23px;
  height: 12.31px;
  padding: 20px 55px 20px 55px;
}
.basket {
  width: 18.95px;
  height: 21.74px;
}
nav {
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
.btn_enter {
  width: 78px;
  height: 40px;
  background-color: #FFFFFF;
  color: #1D1D1D;
  font-family: roboto;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
  border-radius: 2px;
  border: 1px solid #E0E0E0;
  margin-top: 16px;
  margin-right: 27px;
  margin-bottom: 16px;
  margin-left: 0;
}
.search_line {
  max-width: 956px;
  height: 1x;
  color: #626262;
  border-bottom: solid 1px #757575;
  margin: 0 auto;
  font-family: roboto;
  font-weight: 400;
  font-size: 16px;
  padding: 151px 0 0 0;
  box-sizing: border-box;
  }
  .search_container {
  max-width: 956px;
  margin: 0 auto;
  box-sizing: border-box;
}
h2 {
  color: #1D1D1D;
  font-family: roboto;
  font-weight: 400;
  font-size: 22px;
  margin: 0 auto;
  padding: 56px 0 16px 0;
  text-align: left;
}

.rest_container {
  max-width: 956px;
  margin: 0 auto;
  box-sizing: border-box;
}
.card {
  width: 308px;
  height: 366px;
  margin: 0 auto;
  padding: 0;
}
.restaurant {
  width: 317.94px;
  height: 256px;
  margin: 0 auto;
  padding: 0 0 16px 0;
}
h3 {
  color: #1D1D1D;
  font-family: roboto;
  font-weight: 400;
  font-size: 16px;
  margin: 0 auto;
  text-align: left;
  padding: 0 0 4px 0;
}
.cousine {
  color: #626262;
  font-family: roboto;
  font-weight: 400;
  font-size: 14px;
  margin: 0 auto;
  text-align: left;
  padding: 0 0 4px 0;
}
.time {
  color: #1D1D1D;
  font-family: roboto;
  font-weight: 400;
  font-size: 13px;
  margin: 0 auto;
  text-align: left;
  padding: 0 0 36px 0;
}
.footer_container {
  max-width: 1124px;
  height: 552px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #262626;
}
.white_logo {
  float: left;
  width: 190.277px;
  height: 19.69px;
  margin: 0 auto;
  padding: 56px 852px 40px 81px;
}
.footer_line {
  max-width: 956px;
  height: 1x;
  color: #FFFFFF;
  border-bottom: solid 1px #757575;
  margin: 0 auto;
  padding: 116px 87px 0 81px;
  box-sizing: border-box;
}
.language {
  float: left;
  width: 227px;
  height: 40px;
 margin: 0;
  padding: 32px 97px 0 81px;
}
.social {
  float: left;
  width: 92px;
  height: 60px;
   margin: 0;
  padding: 33px 232px 0 81px;
}
.link1 {
  width: 72px;
  height: 16px;
color: #FFFFFF;
font-family: roboto;
  font-weight: 400;
  font-size: 13px;
   margin: 0;
  padding: 39px 128px 23px 0;
}

.link2 {
  width: 196px;
  height: 16px;
color: #FFFFFF;
font-family: roboto;
  font-weight: 400;
  font-size: 13px;
  margin: 0;
  padding: 0 128px 23px 0;
}
.link3 {
  width: 190px;
  height: 16px;
color: #FFFFFF;
font-family: roboto;
  font-weight: 400;
  font-size: 13px;
  margin: 0;
  padding: 0 128px 23px 0;
}

.footer1_line {
max-width: 956px;
  height: 1x;
  color: #FFFFFF;
  border-bottom: solid 1px #757575;
  margin: 0 auto;
  padding: 0 87px 20px 81px;
  box-sizing: border-box;
}
.appstore {
  width: 120.66px;
  height: 40px;
  margin: 0 auto;
  padding: 41px 40px 39px 421px;
}
.googleplay {
  width: 135px;
  height: 40px;
  margin: 0 auto;
  padding: 40px 0 40px 0;
}
.footer2_line {
  max-width: 956px;
  height: 1x;
  color: #FFFFFF;
  border-bottom: solid 1px #757575;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
 {
color: #FFFFFF;
font-family: roboto;
  font-weight: 400;
  font-size: 13px;
  margin: 0 auto;
  padding: 40px 0 40px 81px;
}
.arrow {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  position: fixed;
  top: 410px;
  left: 1010px;
  right: 0;
  bottom: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ExamPro</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/flexboxgrid2.css">
  <link rel="stylesheet" href="1.css">
</head>
  <body>
    <header>
  <div class="header_container">
    <a href=""> <img src="img/logo.svg" alt="logo" class="logo"/></a>
    <nav>
      <ul>
        <li><button class="btn_enter">Войти</button></li>
        <li><a href=""> <img src="img/basket.svg" alt="basket" class="basket"/></a>
      </ul>
    </nav>
  </div>
</header>
    <div class="search_container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
        <div class="search_line">Поиск по ресторанам и кухням</div>
    </div>
</div>
</div>
   <div class="rest_container">
    <h2>Рестораны в Москве</h2>
 <div class="row center-xs center-md center-lg">
    <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/McDls.png" alt="Restaurant">
        <h3><b>Макдоналдс — Газетный</b></h3>
    <p class="cousine">₽₽ • Бургеры</p>
        <p class="time">25 - 35 мин</p>
      </div> </div>
      <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/DimSum.png" alt="Restaurant">
        <h3><b>DimSum & Co — ЦДМ</b></h3>
    <p class="cousine">₽ • Японская • Китайская • Азиатская</p>
        <p class="time">40 - 50 мин</p>
      </div></div>
        <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/DvizhOk.png" alt="Restaurant">
        <h3><b>DДвижОК — Манежная</b></h3>
    <p class="cousine">₽ • Американская • Европейская</p>
        <p class="time">35 - 45 мин</p>
      </div></div>
          <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/Nha.png" alt="Restaurant">
        <h3><b>НЯ — NHA</b></h3>
    <p class="cousine">₽₽ • Вьетнамская</p>
        <p class="time">30 - 40 мин</p>
      </div></div>
   <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/Dzy.png" alt="Restaurant">
        <h3><b>Точка Дзы — Цветной</b></h3>
    <p class="cousine">₽₽ • Вьетнамская</p>
        <p class="time">40 - 50 мин</p>
      </div></div>
   <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/CinnaBon.png" alt="Restaurant">
        <h3><b>Cinnabon</b></h3>
    <p class="cousine">₽ • Выпечка • Десерты • Капкейки</p>
        <p class="time">25 - 35 мин</p>
      </div></div>
   <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/Pizza.png" alt="Restaurant">
        <h3><b>PIZZELOVE</b></h3>
    <p class="cousine">₽₽ • Пицца</p>
        <p class="time">15 - 25 мин</p>
      </div></div>
   <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/Zyu.png" alt="Restaurant">
        <h3><b>Zю кафе — Тверская</b></h3>
    <p class="cousine">₽₽ • Японская</p>
        <p class="time">25 - 35 мин</p>
      </div></div>
   <div class="col-xs-12 col-md-6 col-lg-4">
      <div class="card">
        <img class="restaurant" src="img/BarBQ.png" alt="Restaurant">
        <h3><b>Bar BQ Cafe — Манежная</b></h3>
    <p class="cousine">₽₽₽ • Европейская</p>
        <p class="time">30 - 40 мин</p>
      </div></div>
    </div>
</div>
     <footer>
       <div class="footer_container">
 <div class="white_logo">
      <a href=""> <img src="https://3.downloader.disk.yandex.ru/preview/afa8aecc203d0402a7741b4e86b53307f67411854d9747e9bb2ea5983eaeddc5/inf/hULreP4oY5yoAJc2OsEWTCTJffJxal52fG-GelIG46f-6nDAwK_M4_KAeCUHgwwEVfYqcIZENZnxy7gNuWuaTQ%3D%3D?uid=30038985&filename=white-logo.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo"/></a></div>
      
        <div class="footer_line"></div>
         
        <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">  
      <div class="language"><a href=""> <img src="https://3.downloader.disk.yandex.ru/preview/a6da00fe0456ebeab961d59e3890fcc062b88edbf562eae2f5584a8552ac27d0/inf/7GWUcVacflhwfvp11xFn-gGRk40fsEdCF-80rvm2nt5kzfOHIRleIpd9y9PrKQaEEhf3q-9GPs5eaO0Bl4dC7A%3D%3D?uid=30038985&filename=language.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo"/></a></div></div>
      <div class="col-xs-12 col-md-12 col-lg-12">
       <div class="social"><a href=""> <img src="https://3.downloader.disk.yandex.ru/preview/1f758b908b611eee1d467b4f51c73aa0db988d666f96384c078ac24ce9bfbe21/inf/zX65iLLboI6VmqzIdwlUq3CTrqzjs5YP2Dv-d9bdno5jqbTWfXt-MTIks5sKi1ZSviaevVZetUDvvezHFsnvqg%3D%3D?uid=30038985&filename=social.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo"/></a></div>
   </div>
     
     <div class="col-xs-12 col-md-12 col-lg-12">
         <div class="link1">Об UberEats</div></div>
       <div class="col-xs-12 col-md-12 col-lg-12">
      <div class="link2">Станьте партнёром по доставке</div></div>
          <div class="col-xs-12 col-md-12 col-lg-12">
     <div class="link3">Станьте парнёром-рестораном</div>
        </div>
    
     <div class="col-xs-12 col-md-12 col-lg-12">
<div class="link4">Все города</div>
         
<div class="link5">Цены</div>
           
<div class="link6">Помощь</div>
             
<div class="link7">FAQs</div>
    </div>
     
    </div>

      <div class="footer1_line"></div>
      <ul class="list">
        <li><a href=""> <img src="https://3.downloader.disk.yandex.ru/preview/4aa30f33769a5d900799983080db28f82a8a530c8cdf475aa5bf5590c287610b/inf/H5vpbfuBuS39EiQH7y7UB6TJqIUKpQsg95FKcPMwdd3i5mqadPcsWAsfaatxtUrxlu0bpcoUOhjx-UXz4rkaPg%3D%3D?uid=30038985&filename=Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo" class="appstore"/></a></li></ul>
     <ul class="list"><li><a href=""> <img src="https://1.downloader.disk.yandex.ru/preview/9f5be2cc13a1824d80d61571d2ed976978a4ce61b62c21680d693b8d4387665a/inf/UQLO3vW3P3ASw_0n1SpshQTZjP2y9AtFJhAkK6I2CIjyF5cUvKki8f6IhIBC14Jx5UXzE0SRU32PWhBHxcctCg%3D%3D?uid=30038985&filename=en_badge_web_generic-cf6dad406f.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo" class="googleplay"/></a></li>
        </ul>
      <div class="footer2_line"></div>
      <ul class="list">
<li class="link3">© 2017 Uber Technologies Inc.</li>
</ul>
<ul class="list">
<li class="link3">Обработка персональных данных</li>
</ul>
      <ul class="list">
<li class="link3">Пользовательское соглашение</li>
</ul>
      <ul class="list">
<li><a href=""> <img src="https://3.downloader.disk.yandex.ru/preview/d5d36d0446dc62224d49901304a991f2619f99e6eb43515f49c8e6f313d67fe3/inf/V5lhaxHYcDwCl3a58BkgXZfrTsb4qAvG0ibX9HSk1-aYHVzj3iRqaicdLxDK440jLmls9qwKWYCNoZHvZVQYrA%3D%3D?uid=30038985&filename=btn-up.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=30038985&tknv=v2&size=1865x980" alt="logo" class="arrow"/></a></li>
</ul>
    </div>
</div>
</div>
    </footer>
</body>
</html>

БЛОГ НА HUSL

Проблема с отображением контента в row column при использовании сетки FlexBoxGrid2

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