JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav"></div>
<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
</div>

<br><br><br><br>

Remove the ".container" element and the scrollbar disappears

CSS

body {
  margin: 30px;
  padding-top: 30px;
}

.nav {
  background-color: yellow;
  height: 20px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.container {
  display: flex;
  margin: 0 -100px;
}

.item {
  padding: 0 100px;
  height: 40px;
  width: 50%;
}

.item1 { background-color: green; }
.item2 { background-color: pink; }