我想让它完全响应，但不知道它有什么问题！在PC或大屏幕设备中，它将是两列站点，但对于移动用户来说，它将是一列站点。请帮忙任何帮助将不胜感激。提前谢谢。
<html>
<style type="text/css">
body {background-color:white;}
.container {background:whitesmoke;max-width:800px;margin:auto;}
.header {background-color:tomato;color:white;font-size:25px;text-align:center;
padding:5px 0px 5px 5px;max-width:800px;margin:auto;font-family;Georgia;}
div .center {text-align:center;background-color:whitesmoke;overflow:auto;}
.listimg {width:35%; max-width:300px;}
.font {font-weight:bold;font-style:italic;font-size:20px;}
ul{list-style-type:none;display:block;}
.main li {display:block; width:50%;float:left;margin-left:-2%;}
.main li img {display:block; width:50%;float:left;overflow:auto;}
</style>
<div class="container" id="bg">
<div class="header">
<p> <b> Become An XYZ XYZZ </b> </p>
</div> <!-- End of header -->
<div bgcolor="whitesmoke">
<div class="center">
<ul class="main">
<li>
<img class="listimg" src="images/point1.jpg" />
<p class="font"> Work at your time </p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Get Gratuity & other Benefits</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Mediclaim upto Rs. 1 Lac</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Housing Loan as low as 5-7.5%</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font">International recognition</p>
</li>
</ul>
</div> <!-- End of center -->
</div> <!-- End of container -->
</div>
如果您没有使用任何响应式框架，则必须编写媒体查询来告诉浏览器如何针对不同的浏览器宽度呈现网站。
例如，如果您想在浏览器宽度小于 600px 时使其成为单列布局，您可以在 css 中使用它。
@media (max-width: 600px) {
.main li {
display: block;
width: 100%;
float: left;
margin-left: -2%;
}
}
您可以在此处阅读有关媒体查询的更多信息 https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
否则使用像 Bootstrap 这样的框架 http://getbootstrap.com/