JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="inside">
    <div id="banner">
        I want this to not create a horizontal scrollbar, when the window/frame is too narrow.
</div>
    
    <div id="content">
        </div>
    </div>
</div>

CSS

#main {
    min-width:500px;
    margin: 0 auto;
    
    position: relative;
   overflow: hidden;
}
#inside{
    width:500px;
    margin:0 auto;
    height:100%;
    position:relative;
    background: red;
}
#banner {
    background: green;
    position: absolute;
    left: 200px;
    width: 500px;
    height: 300px;
}

#content {
    width: 400px;
    height: 500px; /* Simulate content */
    background: blue;
}