JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-10 p-0">
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe cumque illo aliquid fuga corporis distinctio libero ad, dolor laboriosam sit officiis. Alias quod dolorem deleniti in nam laborum vel.</div>
    </div>
  </div>
</div>


<!-- ===================== -->

<div class="debug">
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
</div>

CSS

.block {
  padding: 15px;
  padding-left: calc(50vw - 100% / 0.83333333 / 2 + 15px);
  margin-left: calc(100% / 0.83333333 / 2 - 50vw);
  margin-right: 15px;
  background-color: rgba(255, 0, 0, 0.5);
}

/* ================= */

.debug {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -9999;
}

.debug .row {
  height: 100vh;
}

.debug .col {
  background: rgba(0, 255, 0, 0.25);
  background-clip: content-box;
}