我已经创建了一个基本网页，我的主要内容居中，但是我想在内容的两侧填充空白。
http://hometown.net46.net/test.html
这就是我所拥有的。我想填充左右的空白。注意-网页是一个灵活的框。
这是我的html：
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="big_wrapper">
<nav id="top_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="posts.php">Posts</a></li>
<li><a href="booking.php">Booking</a></li>
<li><a href="contact.php">Contact us</a></li>
</ul>
</nav>
<header id="top_header">
<h2>Image here</h2>
</header>
<div id="new_div">
<section id="main_section">
<article>
<header id="welc">
<h2>Welcome to the lounge!</h2>
</header>
<p>The lounge is a youth group for 11 - 18 year olds. We are located in Eastbourne.</p>
</article>
<article>
<header id="article2">
<h2>The lounge website created!!</h2>
</header>
<p>blahblahblahg.</p>
</article>
</section>
<aside id="side_news">
<h4><u>News:</u></h4>
<p>Lounge painting - 13th march</p>
</aside>
</div>
<footer id="footer">
Hosted by <a href="http://joomla.com">Joomla</a>
</footer>
</div>
</body>
而我的CSS：
*{
margin: 0px;
padding:0px;
}
h2{
font:bold 20px tahoma;
}
h4{
font:bold 14px tahoma;
}
header, section, footer, aside, nav, article{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:#DBD7D9;
border-radius:2px;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 20px tahoma;
height:30px;
}
#top_menu a{
color:black;
text-decoration:none;
}
#top_menu li:hover{
background:yellow;
}
#new_div {
display:-webkit-box;
-webkit-box-orient:horizontol;
}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC
}
#footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
最佳答案
填充网站中心内容左右两侧空白的一种方法是将main-content div包裹在另一个容器div中，并为容器div提供背景色
<div id="container">
<div id="main-content">
</div>
</div>
CSS：
#container{
width: 960px;
background: #ccc;
}
#main-content{
width: 800px;
margin: 0 auto;
}
工作示例：
http://jsfiddle.net/7N3Ea/7/
关于html - 填充左右边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15904192/