如何将超出 body 边距的部分水平对齐到中心？
How to horizontal align a section that is out of body's margin to center?
我有一个部分想要水平对齐，但实际情况是这样的：
我用标签“*”对 body 进行了编码，因此它具有 0 个边距和 0 个填充。所以我认为这不是问题所在，我尝试擦除 clearfixes 但它也没有解决我的问题。所以我现在被困住了，因为我不知道它是什么。我是这里的初学者，所以任何帮助都会很好，谢谢。
PS：我忘了说只有当我尝试响应时才会发生这种情况。
这是我认为主要导致问题的两个部分中的HTML：
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
这是响应的CSS：
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
更新：
这是之前的媒体查询：
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
和原来的CSS：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
我刚刚使用您提供的代码创建了一个片段，尽管仍然缺少一些样式，但我想我找到了您取消对齐的原因。
简短的回答是，您在这些元素上设置了一些 margin-left。尝试从应用于 #articles h2 和 #articles article
的样式中删除 margin-left: 101px;
这里是关闭对齐的片段：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
虽然这是所有内容都对齐的代码段（我从这些样式中删除了 margin-left）：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
我有一个部分想要水平对齐，但实际情况是这样的：
我用标签“*”对 body 进行了编码，因此它具有 0 个边距和 0 个填充。所以我认为这不是问题所在，我尝试擦除 clearfixes 但它也没有解决我的问题。所以我现在被困住了，因为我不知道它是什么。我是这里的初学者，所以任何帮助都会很好，谢谢。
PS：我忘了说只有当我尝试响应时才会发生这种情况。
这是我认为主要导致问题的两个部分中的HTML：
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
这是响应的CSS：
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
更新：
这是之前的媒体查询：
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
和原来的CSS：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
我刚刚使用您提供的代码创建了一个片段，尽管仍然缺少一些样式，但我想我找到了您取消对齐的原因。
简短的回答是，您在这些元素上设置了一些 margin-left。尝试从应用于 #articles h2 和 #articles article
margin-left: 101px;
这里是关闭对齐的片段：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-left: 101px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
margin-left: 101px;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>
虽然这是所有内容都对齐的代码段（我从这些样式中删除了 margin-left）：
/* ARTICLES */
#articles {
width: 860px;
}
#articles h2 {
display: block;
width: 98%;
height: 75px;
line-height: 75px;
text-align: center;
font-family: "BebasNeue";
font-size: 40px;
font-weight: normal;
letter-spacing: 2px;
background: url("../img/pxgray.png");
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
margin: 0 auto;
margin-top: 18px;
margin-bottom: 15px;
}
#articles article {
display: block;
width: 87.5%;
height: auto;
border: 1px solid #ccc;
margin: 40px auto;
padding: 10px;
font-family: "TrebuchetMS";
background: white;
color: black;
box-shadow: 1px 1px 2px #ddd;
}
#articles article h4 {
display: block;
font-size: 23px;
margin: 3px auto;
}
#articles article h4 a {
text-decoration: none;
color: #00538C;
}
#articles article h4 a:hover {
text-decoration: underline;
}
#articles .data {
float: right;
background: #393d3f;
color: white;
height: 30px;
line-height: 30px;
margin: -5px;
padding: 4px;
font-size: 13px;
border-radius: 0px 0px 0px 20px;
}
#articles .data span {
margin: 6px;
}
#articles article p {
margin: 10px auto;
font-size: 15px;
}
@media (max-width: 925px) {
#articles {
width: 45%;
}
#articles .data {
margin-left: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 660px) {
#banner h1 {
font-size: 25px;
}
#lateralBar {
float: none;
width: 100%;
margin: 0 auto;
min-height: auto;
margin-top: 20px;
}
#lateralBar input[type="text"]{
width: 93%;
}
#login input[type="email"],
#login input[type="password"] {
width: 90%;
}
#articles {
float: none;
width: 100%;
margin: 0px auto;
min-height: auto;
margin-top: 20px;
}
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
<a href="#">Registrate aquí</a>
<a href="#">¿Has olvidado tu contraseña?</a>
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
<a href="#" class="icon">t</a>
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
<a href="#" class="icon">f</a>
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
<a href="#" class="icon">y</a>
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
<!-- Fin aside -->
<!-- Inicio articulos -->
<section id="articles" class="clearfix">
<h2>Últimos artículos</h2>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article>
<div class="data">
<span>
Fecha: 12 de diciembre
</span>
<span>
Categoría: Pruebas
</span>
</div>
<h4>
<a href="#">Título del artículo</a>
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</article>
<article id="blog">
<a href="#">Ir al blog</a>
</article>
</section>