Hola a todos, tengo un pequeño problema, espero me puedan ayudar:
observen en el código HTML y CSS a continuación que el border-right del
section (color rojo; realmente será blanco pero así mientras para que
se vea el problema) no coincide con el body por 1px.
Quiero pues que este alineado así como el border-left del aside con el body.
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Casa de Oración Cancún</title>
<meta charset='utf-8'>
<!--Elementos auxiliares-->
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="logo.ico"/>
<link rel="icon" href="logo.ico" type="image/x-icon"/>
<link href='http://fonts.googleapis.com/css?family=Nunito:700' rel='stylesheet'>
<!--Elementos auxiliares-->
</head>
<body>
<header>
<img src='header.jpg'/>
</header>
<nav>
<ul>
<li><a href='index.html'>Inicio</a></li>
<li><a href='predicaciones/predicaciones.html'>Predicaciones</a></li>
<li><a href='alabanza/alabanza.html'>Alabanza</a></li>
<li><a href='matrimonios/matrimonios.html'>Matrimonios</a></li>
<li><a href='infantil/infantil.html'>Iglesia Infantil</a></li>
<li><a href='contacto/contacto.html'>Contacto</a></li>
</ul>
</nav>
<aside>
<p>
Bienvenido a la página de Casa de Oración Cancún
</p><br>
<p><figure>
<img src='pastorvictor.jpg'/>
<figcaption>Pastor Víctor Sánchez</figcaption>
</figure></p><br>
<p>
Encuéntrenos en <a href='https://www.facebook.com/CasaDeOracionCancun'>Facebook</a>
</p><br>
<p>
Enlaces recomendados:<br>
<a href='http://www.casadeoracionmexico.info'>Casa de Oración México</a></li><br>
<a href='http://www.ibco.com.mx/'>Instituto Bíblico</a></li><br>
</p>
</aside>
<section>
<article>
<center><img src='serieencurso.jpg' width=638.25 height=236.25/></center>
</article>
</section>
<footer>
<p>Casa de Oración Cancún - Copyright 2012 © Todos los derechos reservados.</p>
</footer>
</body>
</html>
Código HTML:
* {
margin:0;
padding:0;
border:0;
}
html, body {
margin:0 auto;
width:960px;
height:100%;
font-family:"Nunito",Arial;
font-weight:bold;
color:#FFF;
text-align:center;
text-shadow:0px 0px 10px rgba(0,0,0,0.5);
background-color:blue;
background-image:url('background.png');
background-attachment:fixed;
}
header {
position:relative;
width:960px;
height:200px;
margin:0px auto;
border-left:solid 1px white;
border-right:solid 1px white;
}
nav {
position:relative;
background-color:#336699;
margin:0px auto;
width:960px;
padding-top:15px;
padding-bottom:15px;
border-left:solid 1px white;
border-right:solid 1px white;
border-bottom:solid 1px white;
}
nav ul li {
display:inline-block;
margin-right:25px;
}
nav ul li a, nav ul li a:link, nav ul li a:visited {
color:#FFF;
transition:color 0.1s linear;
-webkit-transition:color 0.1s linear;
-moz-transition:color 0.1s linear;
-o-transition:color 0.1s linear;
}
nav ul li a:hover {
color:#FF9900;
}
section {
position:static;
float:right;
background-color:#FFF;
width:719px;
height:100%;
padding-top:10px;
color:#336699;
border-right:solid 1px red;
}
article{
background-color:#FFF;
margin:2%;
color:#336699;
text-align:left;
}
aside {
position:static;
float:left;
background-color:#336699;
width:239px;
height:100%;
padding-top:10px;
border-left:solid 1px white;
}
footer {
position:relative;
clear:both;
width:960px;
height:30px;
margin:0px auto;
font-size:10px;
border-top:solid 1px white;
overflow:hidden;
}
a, a:link, a:visited {
text-decoration:none;
color:#FFFFFF;
transition:color 0.1s linear;
-webkit-transition:color 0.1s linear;
-moz-transition:color 0.1s linear;
-o-transition:color 0.1s linear;
cursor:pointer;
}
a:hover {
text-decoration:none;
color:#0099CC;
}
Espero puedan visualizar el detalle en un navegador y darme una solución.
¡Gracias de antemano, buen día!
