Full Width Banner

HTML

<section id="header-blue">
    <div id="header-wrap">
        <div class="header-left">
            <p>1</p>
        </div>
        <div class="header-center">
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </div>
        <div class="header-right">
            <p>3</p>
            <p>3</p>
        </div>
    </div>
</section>

<section id="header-blue">
    <div id="header-wrap">
        <div class="header-left">
            <p>1</p>
        </div>
        <div class="header-center">
            <p>2</p>
            <p>2</p>
            <p>2</p>
            <p>2</p>
        </div>
    </div>
</section>

CSS

#header-blue {
  margin-bottom: 50px;
  background-color: #3498DB;
  color: #fff;
}
#header-wrap {
    display: flex;                  /* 1 */
    align-items: flex-start;        /* 2 */
    justify-content: space-between; /* 3 */
    text-align: center;
    padding: 1rem 0; 
}
.header-left {
    border: 1px solid red;
    width: 100px;
  }
.header-right {
    border: 1px solid red;
    width: 100px;
  }
.header-center {
    border: 1px solid red;
    width: 100px;
  }
  
#header-blue:last-child > #header-wrap::after {    /* 4 */
    content: "";
    width: 100px;
}