How do I make this banner look like the Urban Outfitters one? - html

Question

I am trying to practice designing an online shop landing page, and I am taking inspiration from Urban Outfitters. I am trying to get the orange promo part to look the same as Urban Outfitters.
I have tried justify-content: center and space-around, or also using padding but that is not very responsive.
Codepen here.
*{
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>shop</p>
</div>
<nav>
<div class="logo">
<h2>Giants & Dwarfs</h2>
</div>
<ul class="nav-links">
<li id="about">About</li>
<li id="womens">Women's</li>
<li id="mens">Men's</li>
<li id="sale">Sale</li>
</ul>
</nav>
<div class="landing-page">
<img src="https://images.ctfassets.net/q602vtcuu3w3/7rnjSHqBEcgbtJ2pZqZarm/c32a5cbe533a8aab72aee54689ddb7e3/190617-WK3-WGW-4-Update.jpg">
<a></a>
<img src="https://images.ctfassets.net/q602vtcuu3w3/6vo26Ry1p3rcvSURCYBoJH/2fdc52ccb0ee69352d8e02ff905d592a/190603-WK1-LGW-1.jpg">
</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>
Trying to replicate this, top orange section

Answer 1

I am not a CSS expert by any stretch, but I have played around a bit with it. Have you tried using the following options?
padding-right: 15px;
padding-left: 15px;
margin-left: 1%;
Padding adds space to the left or to the right of your object. Margin adds space around your object. Either can be expressed as pixels or percentage. I have often found percentages to be more reliable for expected output than pixels, but again, I am not an expert so it could be my own unfamiliarity at work there.
For more detail: https://www.w3schools.com/cssref/pr_padding.asp
Hope this helps - happy coding to you!

Answer 2

You can use margins with flexbox, pretty much like align-self with much more control.
#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">shop</p>
</div>

Answer 3

Force your inner elements to display as inline block, add some padding to your center element and flip your promo class from flex to block.
in the below example there are 2 new class (sideMe and sideMeCenter) and a mod to your display property in promo
add the classes to the contained promo elements and should be good to go
.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">shop</p>
</div>