0

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;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701

0 Answers0