центральный текст в баннере без дополнительного div

Question

Я хотел бы создать баннер полной ширины и объединить его с выравниваемым контентом flex и максимальной шириной, чтобы избежать использования дополнительного div.Я не уверен, что это возможно.Но я хотел бы попытаться избежать моего первого инстинкта: просто добавить div-обертку и назвать это днем.Я чувствую, что должен быть лучший путь.

<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
     }
   }

справочное изображение: текстовый баннер с фоном полной ширины, но с текстом максимальной ширины

Я использую sass, и я хотел бы сделатьis

    <div class="banner-wrapper">
      <p>read all our policies</p>
      <p><a href="">examine our license agreement</a></p>
    </div>

Я не могу найти способ сделать это с помощью flex или grid.этот хромой псевдо-код является тем направлением, с которым я экспериментирую:

.banner-wrapper {
 display: flex; 
 justify-content: center;
 background-color: black;
 padding:9px auto;  //use padding similar to margin : 0 auto;
}