有没有一种方法可以让迪夫容器在容器开始接触浏览器端时立即按比例缩小(如果浏览器被做得更小).而不是只在达到媒体查询宽度设置后才执行？
目前，我的容器会从左侧或右侧被切断，只有在Mediaquery将页边距设置为0时，它才会被"修复".有什么 idea 吗？
代码如下.值得在全尺寸上看起来更大，并将浏览器宽度调整为更小，看看事情是如何被切断的？
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>