以完整背景为中心的内容

Question

在 div 中，我想要一个全宽背景色并将内容居中。我在其他一些帖子中读到，它需要一个外部 div 来设置 background-color，然后是一个内部 div，其宽度为我的内容和 margin:0 auto;。我试过了，但没用。我尝试将我的内容向左浮动，但这也不起作用。

这是我的代码。问题出在我放置背景颜色的 div class="themeDesign" 中。在 div class="themeDesignicons" 中，当我将 width:1000px 中的一个 li 元素延伸到下一行时，但是对于 width:1300px 它们出现在同一行上而没有居中。为什么？ first-child 重要吗？我不能继续下去。提前致谢

*{
 margin:0px;
 padding:0px; 
}
body{
 width:100%;
}
header{
 background-color:#088da5;
 overflow:hidden;
 padding:15px 0;
}
.main-header{
 width:1300px;
 margin:0 auto;
}
.main-header .left-mainheader{
 float:left;
 margin-right:400px; 
}
.main-header .left-mainheader ul li{
 display:inline-block;
 margin-right:26px;
}
.main-header .left-mainheader li a{
 text-decoration:none;
 color:white;
}
.main-header .right-mainheader{
 float:left;
}
.main-header .right-mainheader ul li{
 display:inline-block;
 margin-right:15px;
}
.main-header .right-mainheader ul li a{
 text-decoration:none;
 color:white;
}
.left-mainheader img{
 padding-right:8px;
}
header .header h1{
 background-image:url(images/logoheader.png);
 width:440px;
 height:84px;
 margin:60px auto;
 overflow:hidden;
 clear:both;
}
.header ul{
 margin:25px auto;
 width:440px;
}
.header li {
 display:inline-block;
 margin:0 15px 0 0;
}
.header li a{
 color:black;
 text-decoration:none;
 font-size:15px;
 font-family: tahoma;
}
header li a:hover{
 text-decoration:underline;
}
.header .headermesa{
 border-top:1px solid #666633;
}
.slider{
 background-color:#f7f8fa;
}
.slidermesa{
 margin:0 auto;
 width:1200px;
 height:421px;
}
.slide img{
 border-top:1px solid #666633;
 width:1200px;
 height:421px;
}
.themeDesign{
 background-color:#f7f8fa;
}
.themedesignheadings{
 margin:0 auto;
 width:1000px;
 padding:35px 0;
 border-bottom:1px dashed #877676;
}
.themeDesignicons{
 width:1000px;
 margin:0 auto;
}
.themeDesignicons ul li{
 display:inline-block;
 width:250px;
}

<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
 <header>
  <div class="main-header">
   <div class="left-mainheader">
    <ul>
     <li>
      <a href="#"><img src="images/phoneIcon-header.png"/> +565 975 658</a>
     </li>
     <li> 
      <a href="#"><img src="images/emailheader3.png"/>info@premiumcoding.com</a>
     </li> 
     <li> 
      <a href="#"><img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00</a>  
     </li>
    </ul>
   </div>
   <div class="right-mainheader"> 
    <ul>
     <li><a href="#">Latest News</a></li>
     <li><a href="#">Login</a></li>
     <li><a href="#">Register</a></li>
     <li><a href="#">About Us</a></li>
   </div>
  </div>
  <div class="header">
   <h1></h1>
  <div class="headermesa"> 
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Apparel</a></li>
    <li><a href="#">Fashion</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div> 
  </div>
 </header>
 <div class="slider">
  <div class="slidermesa">
   <div class="slide">
    <img src="images/mainslide.png"/>
   </div>
  </div>
 </div>
  <div class="themeDesign">
   <div class="themedesignheadings">
    <h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
    <p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
   </div> 
   <div class="themeDesignicons">
    <ul>
     <li>
      <div class="disc-cam">
       <div class="icon cam2"></div>
      </div>
      <div class="disc-text">
       <h3>Responsive Design</h3>
       <p>Lorem ipsum dolor sit amet, co
       ctetuer adipiscing elit, sed di
       nonummy nibh euismod te.</p>
       <a href="#">Read More<img src="images/arrow.png"/></a>
      </div>
     </li>
     <li>
      <div class="disc-cam">
       <div class="icon cam2"></div>
      </div>
      <div class="disc-text">
       <h3>Responsive Design</h3>
       <p>Lorem ipsum dolor sit amet, co
       ctetuer adipiscing elit, sed di
       nonummy nibh euismod te.</p>
       <a href="#">Read More<img src="images/arrow.png"></a>
      </div>
     </li>
     <li>
      <div class="disc-cam">
       <div class="icon cam2"></div>
      </div>
      <div class="disc-text">
       <h3>Responsive Design</h3>
       <p>Lorem ipsum dolor sit amet, co
       ctetuer adipiscing elit, sed di
       nonummy nibh euismod te.</p>
       <a href="#">Read More<img src="images/arrow.png"></a>
      </div>
     </li>
     <li>
      <div class="disc-cam">
       <div class="icon cam2"></div>
      </div>
      <div class="disc-text">
       <h3>Responsive Design</h3>
       <p>Lorem ipsum dolor sit amet, co
       ctetuer adipiscing elit, sed di
       nonummy nibh euismod te.</p>
       <a href="#">Read More<img src="images/arrow.png"></a>
      </div>
     </li>
    </ul>
   </div>
  </div>

Answer 1

试试这个

.themeDesignicons {
width: auto;
margin: 0 auto;
text-align: center;
}

以完整背景为中心的内容

center content with full background

css

center

margin