左右の属性で相対的な位置を取得したときにdivを反応させるにはどうすればいいですか

Question

これをレスポンシブなものにしようとしています。私はブートストラップを使用していますが、私はウェブサイトの中心に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

中心に常にこれを行うために.main-bodyに​​を設定し、left: 370pxを削除するようにしてください。