SOURCE

<div>
  <div class="header-gradient-after">
    <div class="header-gradient-content">
      <div class="header-gradient-content-inside">
          <div class="bold-underline-links header-gradient-sponsor">
          </div>
      </div>
     </div>
  </div>
  <div class="article-content">
  <p>Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.</p>
  <p>Case in point: should the scrollbar be taken into account for the <code>vw</code> unit? What about a site’s navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, <a href="https://css-tricks.com/the-notch-and-css/">notch</a>!) that can’t be overlooked.</p>
  </div>
<div>  

body{
  background:black;
}
.header-gradient-after {
    width:99vw;
    height:10vh;
    background: linear-gradient(90deg,#ff8a00,#e52e71);
    border-radius: 8px;
}

.article-content {
    margin: 0 auto;
    width:50vw;
    padding: 4rem;
    margin-top: -20px;
    background: #fff;
    overflow-wrap: break-word;
    border-radius: 8px;
}