Как мне сделать этот баннер похожим на Urban Outfitters?

Question

Я пытаюсь разработать целевую страницу интернет-магазина и черпаю вдохновение в Urban Outfitters.Я стараюсь, чтобы оранжевая промо часть выглядела так же, как Urban Outfitters.

Я пробовал justify-content: center и space-round, или также использовал отступ, но это не очень отзывчиво.

Codepen здесь .

*{
  margin: 0px;
  padding: 0px;
  border-sizing: border-box;
}

#promo{
  background-color: #F5C793;
  display: flex;
  align-items: center;
  min-height: 50px;
  justify-content: space-around;
}

.promo-link{
  color: #222;
  text-decoration-color: #222;
}

nav{
  display: flex;
  border-bottom: 0.3px solid #d3d3d3;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}

.nav-links{
  display: flex;
  list-style: none;
  padding-left: 20px;
}

.nav-links li{
  padding-left: 15px;  
  padding-right: 15px;
}

nav a{
  text-decoration: none;
  color: #767676;
}

nav a:hover{
  color: #b2b2b2;
  border-bottom: 1px solid black;
}

.logo{
  color: #30336b;
  text-transform: uppercase;
  padding-left: 50px;
}

.landing-body{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display:inline;
}

.landing-page{
  display: grid;
  grid-template-columns: 49% 2% 49%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

.three-div{
  display: grid;
  grid-template-columns: 32% 2% 32% 2% 32%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

img{
  display: inline;
  opacity: 1.0;
  padding-top: 10px;
  width: 100%;
}

img:hover{
  opacity: 0.8;
}

<div id="promo">
  <p>everything you love, all in one place.</p>
  <h3 class="center">MOST ♥ LIKED </h3>
  <p><a href="#" class="promo-link">shop</a></p>
</div>

<nav>
  <div class="logo">
    <h2>Giants & Dwarfs</h2>
  </div>

  <ul class="nav-links">
    <li id="about"><a href="#">About</a></li>
    <li id="womens"><a href="#">Women's</a></li>
    <li id="mens"><a href="#">Men's</a></li>
    <li id="sale"><a href="#">Sale</a></li>
  </ul>
</nav>

<div class="landing-page">
      <a href="#"><img src="https://images.ctfassets.net/q602vtcuu3w3/7rnjSHqBEcgbtJ2pZqZarm/c32a5cbe533a8aab72aee54689ddb7e3/190617-WK3-WGW-4-Update.jpg"></a>
  <a></a>
      <a href="#"><img src="https://images.ctfassets.net/q602vtcuu3w3/6vo26Ry1p3rcvSURCYBoJH/2fdc52ccb0ee69352d8e02ff905d592a/190603-WK1-LGW-1.jpg"></a>
</div>

<div class="three-div">
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/7btvNrhUWJrd5UWYSRHtJr/43f9ce8f23d39c839f9b0e34991d97cc/190603-WK1-MGW-5.jpg">
  </a>
  <a></a>
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/5674zBs4G9hFqVyg2ceT6y/83fd495152f58a7bd12e64d68e541dcd/190617-WK3-HGW-7.jpg">
  </a>
  <a></a>
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/3Rz4KD78yXurQYIyqx6oyC/be018c5eeecd2df0a81471bb81177d8d/190617-WK3-WGW-7.jpg">
  </a>
</div>

<div class="exclusives">
  
</div>

Попытка повторить это , верхняя оранжевая секция

Answer 1

Вы можете использовать поля с flexbox, почти как align-self с гораздо большим контролем.

#promo {
  background-color: #F5C793;
  display: flex;
  align-items: center;
  min-height: 50px;
}

.left {
  margin-left: auto;
}

.center {
  margin: 0 20px;
}

.right {
  margin-right: auto;
}

<div id="promo">
  <p class="left">everything you love, all in one place.</p>
  <h3 class="center">MOST ♥ LIKED </h3>
  <p class="right"><a href="#" class="promo-link">shop</a></p>
</div>

Answer 2

Заставьте ваши внутренние элементы отображаться в виде встроенного блока, добавьте некоторые отступы к вашему центральному элементу и переключите ваш промо-класс с flex на block.

в приведенном ниже примере есть 2 новых класса (sideMe и sideMeCenter) и мод для вашего свойства отображения в promo

добавьте классы к содержащимся промо-элементам, и все должно быть в порядке

.sideMe {
  display: inline-block;
  margin:10px
}
.sideMeCenter {
  padding: 0 40px;
}

*{
  margin: 0px;
  padding: 0px;
  border-sizing: border-box;
}

#promo{
  background-color: #F5C793;
  display: block;
  align-items: center;
  min-height: 50px;
  justify-content: space-around;
  text-align:center;
}

.promo-link{
  color: #222;
  text-decoration-color: #222;
}

nav{
  display: flex;
  border-bottom: 0.3px solid #d3d3d3;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}

.nav-links{
  display: flex;
  list-style: none;
  padding-left: 20px;
}

.nav-links li{
  padding-left: 15px;  
  padding-right: 15px;
}

nav a{
  text-decoration: none;
  color: #767676;
}

nav a:hover{
  color: #b2b2b2;
  border-bottom: 1px solid black;
}

.logo{
  color: #30336b;
  text-transform: uppercase;
  padding-left: 50px;
}

.landing-body{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display:inline;
}

.landing-page{
  display: grid;
  grid-template-columns: 49% 2% 49%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

.three-div{
  display: grid;
  grid-template-columns: 32% 2% 32% 2% 32%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

img{
  display: inline;
  opacity: 1.0;
  padding-top: 10px;
  width: 100%;
}

img:hover{
  opacity: 0.8;
}

.exclusives-title{
  padding-top: 20px;
  text-align: center;
  display: grid;
}

.exclusives-title h2{
  font-weight: 100;
  padding-bottom: 5px;
}

.exclusives{
  grid-template-columns: 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

<div id="promo">
  <p class ="sideMe">everything you love, all in one place.</p>
  <h3 class="center sideMe sideMeCenter">MOST ♥ LIKED </h3>
  <p class="sideMe"><a href="#" class="promo-link">shop</a></p>
</div>

Answer 3

Я ни в коем случае не эксперт CSS, но я немного поиграл с этим.Вы пробовали использовать следующие опции?

отступ справа: 15 пикселей;
отступ слева: 15 пикселей;

поле слева: 1%;

Заполнение добавляет пространство слева или справа от вашего объекта.Маржа добавляет пространство вокруг вашего объекта.Либо можно выразить в пикселях или процентах.Я часто считал, что проценты для ожидаемого результата более надежны, чем пиксели, но, опять же, я не эксперт, так что это может быть моя собственная незнакомость на работе.

Для более подробной информации: https://www.w3schools.com/cssref/pr_padding.asp

Надеюсь, это поможет - счастливого вам кодирования!