<div class="content">
  
  <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
  
  <div class="full-width">
  
  <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
    
    </div>
    
    <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
    
    <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
    
    <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
    
    <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
  
  <p>Lorem ipsum dolor sit amet, laoreet singulis euripidis ea nec, ubique voluptatibus mea ex, ut nam tation imperdiet omittantur. Ex fugit omittam invidunt ius, nec eu prima fierent omittam.</p> 
  
  <p>Ea maluisset similique has. Consul debitis cu qui. Saepe noluisse eam at, nec deleniti temporibus et. Per porro affert tempor ex, illum constituam nec ad, in ius dolor ridens blandit. Iusto corrumpit ne vis, vis ne delectus reprimique.</p>
  
</div>
.content {
  width: 75vw;
  max-width: 25em;
  margin: 0 auto;
}

.full-width { 
  box-sizing: border-box;
  width: 100vw; 
  position: relative; 
  left: 50%; 
  right: 50%; 
  /* transform: translateX(-50vw); don't use this */
  margin-left: -50vw; 
  margin-right: -50vw; 
  background-color: #aaa;
  padding: 2em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.