Alinear border-right 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;
}
¡Gracias de antemano, buen día!
