How to get specifically positioned divs to correctly resize based on browser width

Is there a way to have a div container scale down responsively as soon the the container starts hitting the browser sides (if browser is made smaller)... rather than only doing it once it hits a media query width setting?

Currently my containers get cut off either the left or right side, and it's only "fixed" once the media queries kicks into set margins to 0. any ideas?

I have put the code below into a snippet.

It may be better to view the snipper when you expand the snippet to full size, and adjusting browser width to be smaller to see how things get cutoff.

body {
  background-color: whitesmoke;
  margin: 20px;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.2;
}


/* Link styles */

a {
  color: blue;
  /* Set link color to blue */
  text-decoration: none;
  /* Remove default underline */
}


/* Hover and active link styles */

a:hover,
a:active,
a:focus {
  text-decoration: underline;
  /* Underline link on hover, click, or focus */
}

.container {
  background-color: ;
  margin-bottom: 80px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Change flex direction to column */
  position: relative;
  /* Add position relative */
  margin-top: 0px;
  /* Add margin-top for spacing */
}


/* Custom CSS for text boxes */

.textbox {
  background-color: white;
  max-width: 600px;
  padding: 10px;
  margin-top: 20px;
  /* Add margin-top for spacing */
  margin-left: auto;
  /* Align to the right */
  margin-bottom: 0px;
  /* Add margin-bottom for spacing */
  text-align: left;
  /* Align text to the left */
}


/* Media query for positioning and scaling the second container */

@media screen and (max-width: 700px) {
  .first-container,
  .second-container {
    margin-left: 0;
    /* Reset margin-left */
    margin-right: 0;
    /* Reset margin-left */
  }
}

@media screen and (min-width: 700px) {
  .first-container {
    margin-left: 8%;
    /* Position from the left */
  }
  .second-container {
    margin-right: 8%;
    /* Position from the right */
  }
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="container first-container" style="max-width: 800px">
  <div style="background-color: orange; width: 100%">
    Content / text/ images
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div class="textbox">
    Lorem ipsum
  </div>
</div>

<div class="container second-container" style="max-width: 600px">
  <div style="background-color: lightcoral; width: 100%">
    Content / text/ images
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div class="textbox">
    Lorem ipsum
  </div>
</div>

Solution

You can achieve this by using the CSS calc() function in combination with viewport units vw for viewport width.

body {
  background-color: whitesmoke;
  margin: 20px;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 1.2;
}

/* Link styles */
a {
  color: blue; /* Set link color to blue */
  text-decoration: none; /* Remove default underline */
}

/* Hover and active link styles */
a:hover,
a:active,
a:focus {
  text-decoration: underline; /* Underline link on hover, click, or focus */
}

.container {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  width: calc(100% - 40px); /* Set width to 100% minus the total horizontal padding */
  max-width: 800px; /* Set max-width to 800px */
  margin-bottom: 80px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Change flex direction to column */
  position: relative; /* Add position relative */
  margin-top: 0px; /* Add margin-top for spacing */
}

/* Custom CSS for text boxes */
.textbox {
  background-color: white;
  max-width: 600px;
  padding: 10px;
  margin-top: 20px; /* Add margin-top for spacing */
  margin-left: auto; /* Align to the right */
  margin-bottom: 0px; /* Add margin-bottom for spacing */
  text-align: left; /* Align text to the left */
}

/* Media query for positioning and scaling the second container */
@media screen and (min-width: 700px) {
  .first-container {
    margin-left: calc(8vw - 20px); /* Position from the left */
  }
  .second-container {
    margin-right: calc(8vw - 20px); /* Position from the right */
  }
}