Problema con un objeto El problema surge que en el <header> tengo puesto un borde que quiero que me abarque todo la pantalla, similar al de [URL="http://www.avira.com/es/index"]http://www.avira.com/es/index[/URL]
El problema surge que cuando cambio la resolución de la pantalla a una mas chica (o simplemente le pones zoom) pareciera que el tamaño se enchica
Realmente no me se explicar, pero intentaré pasarles el código tanto html cómo css para que me entiendan
Código HTML:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'> <meta content='width=device-width, initial-scale=1' name='viewport'> <title>Usa una guía</title> <link type="text/css" rel="stylesheet" href="AQUICSS.css"/> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400"/> </head> <body> <!-- Header --> <header class="main-header group"> <div class="grid-full"> <h1 class="logo" id="logo-header"> <a href="index.html">Use A Guide</a> </h1> <nav class="nav-header"> <ul> <code class="nav-list"> <li><a href="index.html">Inicio</a></li><!-- --><li><a href="why_use_a_guide.html">¿Porqué usar una guía?</a></li><!-- --><li><a href="steps.html">Pasos a seguir</a></li><!-- --><li><a href="recommended_pages.html">Páginas recomendadas</a></li><!-- --><li><a href="backgrounds.html">Backgrounds</a></li><!-- --><li><a href="about_me.html">Sobre mí</a></li> </code> </ul> </nav> </div> </header> <!-- Hero --> <section class="hero container"> <h2>Usa una guía, gana una partida</h2> <p>asdadadadadd</p> <a class="btn btn-alt" href="why_use_a_guide.html">¿Porqué usar guía?</a> </section> <!-- Teasers --> <section class="grid"> <!-- Steps --> <article class="teaser col-1-3"> <a href="steps.html"> <h5>Pasos a seguir</h5> <h3>Entiende Al Campeón</h3> </a> <p>Conoce sus debilidades, sus ventajas, su estilo de juego, sus combos y mucho más...</p> </article><!-- Recommended Pages --><article class="teaser col-1-3"> <a href="recommended_pages.html"> <h5>Páginas recomendadas</h5> <h3>Busca Una Guía</h3> </a> <p>Forjale una build, runas y maestrías correctas</p> </article><!-- Backgrounds --><article class="teaser col-1-3"> <a href="backgrounds.html"> <h5>Backgrounds</h5> <h3>¡Mira Fantásticos Fondos!</h3> </a> <p>¡Descarga, observa y escucha contenidos especiales!</p> </article> </section> <!-- Footer --> <footer class="main-footer group"> <h1 class="logo" id="logo-footer">Use A Guide</h1> <p id="legend">Usar una guía en <strong> League Of Legends </strong> puede definir entre una <strong> victoria y una derrota. </strong></p> <small id="copyright">© Zzz01 Breikoft</small> <nav class="nav-footer"> <ul> <code class="nav-list"> <li><a href="index.html">Inicio</a></li><!-- --><li><a href="why_use_a_guide.html">¿Porqué usar una guía?</a></li><!-- --><li><a href="steps.html">Pasos a seguir</a></li><!-- --><li><a href="recommended_pages.html">Páginas recomendadas</a></li><!-- --><li><a href="backgrounds.html">Backgrounds</a></li><!-- --><li><a href="about_me.html">Sobre mí</a></li> </code> </ul> </nav> </footer> </body> </html>
Código:
/*
========================================
Reset CSS:
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
========================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
========================================
Custom styles
========================================
*/
body {
color: #888;
font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
========================================
Grid
========================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid,
.main-footer {
margin: 0 auto;
width: 960px;
}
.container,
.main-footer {
padding-left: 30px;
padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
========================================
Typography
========================================
*/
h1, h2, h3, h4 {
color: #648880;
}
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
/*
========================================
Links
========================================
*/
a {
color: #648880;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
border-bottom: 1px solid #dfe2e5;
}
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid #dfe2e5;
padding: 10px 30px;
}
#Slide-top {
position: fixed;
bottom: 40px;
right: 20px;
}
#Slide-top,
span {
width: 70px;
height: 70px;
display: block;
background: url('media/buttons/Slide-top.png') no-repeat center center;
}
/*
========================================
Main header
========================================
*/
.main-header {
border-top: 1px solid #a0a9b2;
border-bottom: 1px solid #a0a9b2;
}
.grid-full {
margin: 10px auto;
width: 960px;
}
#logo-header {
border-right: 1px solid #cacfd4;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding-right: 100px;
text-transform: uppercase;
}
/*
========================================
Main footer
========================================
*/
#legend {
text-align: center;
display: block;
width: 190px;
position: relative;
left: 10px;
}
#logo-footer {
display: block;
float: left;
text-transform: uppercase;
}
#copyright {
margin-left: 40px;
}
/*
========================================
Navigation
========================================
*/
.nav-header {
text-align: right;
font-size: 14px;
font-weight: 400;
padding: 23px 0px;
}
.nav-footer {
text-align: right;
font-size: 14px;
font-weight: 400;
display: block;
width: 100%;
position: relative;
bottom: 120px;
left: 150px;
}
/*
========================================
Home
========================================
*/
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
.hero h2 {
font-size: 36px;
}
.hero p {
font-size: 24px;
font-weight: 100;
}
.teaser a:hover h3 {
color: #a9b2b9;
}
.logo {
padding: 23px 0px;
}
.nav-list li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
text-transform: uppercase;
}
Respuesta: Problema con un objeto 
