JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <p>Text in wrapper</p>

  <div class="unwrapper">
    <p>Text in unwrapper</p>
    <div class="big-box">Text in big-box</div>
  </div>

  <p>Text in wrapper</p>
</div>

CSS

body {
  border: 1px solid blue;
  margin: 10px;
  padding: 10px;
}

.wrapper {
  border: 1px solid black;
  margin: 0 auto;
  width: 320px;
}

.unwrapper {
  border: 1px solid green;
}

.big-box {
  border: 1px solid red;
  margin: 0 auto;
  width: 480px;
}

JavaScript

$(function(){
  $(window).resize(function(){
    $.each($('.unwrapper'), function(idx, ele) {
      var $e = $(ele);
      // reset
      $e.css('margin-left', '0px');
      $e.css('margin-right', '0px');
      
      $e.css('margin-left', (-parseInt($e.offset().left) + parseInt($('body').css('margin-left')) + parseInt($('body').css('padding-left')))+ 'px');
      $e.css('margin-right', (-$('body').innerWidth() + $e.outerWidth() + parseInt($('body').css('margin-right')) + parseInt($('body').css('padding-right'))) + 'px');
      });
    });
  $(window).resize();
  });