转换为响应式网页设计

我刚刚完成了个人投资组合网站的第一页。在网络开发方面，我只是一个初学者。我已将我的网站宽度设置为1600像素，与我的背景图像宽度相同。转换为响应式网页设计

我现在想要做的是将页面转换为响应式设计。我唯一的问题是，当我将页面的宽度更改为100％时，我的横幅div的位置向左移动，而不是居中。

这是我的代码片段。

<body> 

<div id="banner"> 
    <div class="container_12"> 
     <div class="grid_7 prefix_5" id="navbar"> 
      <ul> 
       <li><a href="index.html" title="Gelo Lopez">Home</a></li> 
       <li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li> 
       <li><a href="http://gelolopez.wordpress.com">Blog</a></li> 
       <li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li> 
      </ul> 
     </div> 
     <div class="grid_10" id="bannertext"> 
      <h1>Hello!</h1> 
      <div class="clear"></div> 
      <p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</> 
      <p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p> 
     </div>  
    </div> 
    </div><!--end of banner-->

CSS：

body { 
width: 100%; 
color: #5a5959; 
font-size: 18px; 
font-family: "Lao UI"; 
} 

/* sections*/ 
#banner { 
background-image: url(../Images/Banner-background.png); 
height:660px; 
color: #fff; 
font-size: 24px; 
}

我也使用960个GS模板12列。我决定将container_12 div放在id =横幅下，以便将内容放置在页面的中心。

我希望有人能帮助我

来源

2013-11-04 gelolopez

没有“转换”，你必须为它设计。阅读媒体查询。 – Brad

向右移动似乎不正确？您可以将背景设置为顶部中心，这将修复背景的外观。但是，从响应式设计开始，您就可以阅读媒体查询以开始使用。 –

向右移？没有离开？另外'＃banner' div应该默认为100％，所以我假设你的背景图像有问题。只需用'background-position'属性将图片居中。 –