html - 当 div 具有左右属性的相对定位时，如何使它响应

Question

我正在尝试使其具有响应性，因此当您缩小它时，它会像响应式网站一样与导航栏一起移动。我正在使用 Bootstrap ，但是我想将 div 保留在网站的中心，而不是填满整个宽度。

<div class="main-body">
    <div class="MainImage">
        <img src="shirini1.jpg"  height="700">
    </div>
    <div class="RedBar">       
        <p id="Welcome">Welcome to my Website</p>
    </div>

</div>

和CSS

.main-body{
position: relative;
left: 370px;
width: 60%;
display: inline-block;
}

.main-body,img{ 
position: relative;
max-width: 100%;
height: auto;
display: block;
}

.RedBar{
height:50px;
background-color:#ff4c55;

}

#Welcome{
color: white;
text-align: center;
position: relative;
top: 10px;
font-size: 24px
}

Answer 1

尝试设置 margin: 0 auto; display:block; 到 .main-body 并删除 left: 370px 以使其始终居中。