Web page background problem_html/css_WEB-ITnose

#a {
width:100%;
background-color:#00f;
line-height:105px;
}
#b {
position:relative;
background-color:#F00;
font-weight:bold;
width:500px;
margin:0 auto;
}

The abbreviation is as shown above. The default white part of the following body is not included. The above two styles They are the styles of layer a and layer b respectively. When browsing in a full-screen window, everyone knows that the inside of layer a is blue and the inside of layer b is red. The background color of the area occupied by layer b covers the color of layer a, so What is shown is the inner infrared and blue situation.
When I shrink the browser window, assuming the width is 500px, the window just completely displays the red area of ​​layer b. I move the scroll bar of the browser from the left to the right, and find that the right side should originally display layer a. The blue part is not displayed, but the system default white color of the body. As the browser window is slowly widened, the blue part of layer a is slowly filled in. Is there any way to solve this problem? I don’t want to set the width of layer a to a fixed value.

Reply to discussion (solution)

#a {
min-width:500px;
}

# a {
min-width:500px;
}
Thank you very much, it has been bothering me for a few days, haha!