I'd like to create a full width banner and combine it with flex's justify content and max-width to avoid using an extra div. I'm not sure it's possible. But I'd like to try to avoid my first instinct of just adding a wrapper div and call it day. I feel there should be a better way.
<div class="banner-wrapper">
<div class="banner-content">
<p>read all our policies</p>
<p><a href="">examine our license agreement</a></p>
</div>
</div>
.banner-wrapper {
display: flex;
justify-content: center;
background-color: black;
.banner-content {
//base
color: white; //not relevant
font-size: 12px; //not relevant
//layout
width: 100%;
max-width: 1200px;
display: flex;
justify-content: space-between;
padding:9px 15px; //not relevant
}
}
reference image : text banner with full width background but max-width'ed text
I'm using sass and what I'd like to do is
<div class="banner-wrapper">
<p>read all our policies</p>
<p><a href="">examine our license agreement</a></p>
</div>
I can't find a way of doing it with flex or grid. this lame pseudo-ish code is the direction I'm experimenting with:
.banner-wrapper {
display: flex;
justify-content: center;
background-color: black;
padding:9px auto; //use padding similar to margin : 0 auto;
}