Навигация не будет внутри заголовка

Когда я изменяю размер браузера, навигация переходит в серое пространство вместо того, чтобы оставаться в черном. Может кто-нибудь помочь мне понять, почему это не работает?Навигация не будет внутри заголовка

JS Fiddle: http://jsfiddle.net/58t77g7q/2/

HTML

<body> 
     <header> 
      <div class="wrapper"> 
       <h1>Business Logo</h1> 
       <nav class="nav"> 
        <ul> 
         <li><a href="">item 1</a></li> 
         <li><a href="">item 2</a></li> 
         <li><a href="">item 3</a></li> 
         <li><a href="">item 4</a></li> 
         <li><a href="">item 5</a></li> 
        </ul> 
       </nav> 
      </div><!-- END OF NAV WRAPPER --> 

     </header> 

     <div class="clearfix"></div> 


     <div class="wrapper"> 

      <div class="boxes"> 



      </div> 

      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 
      <div class="boxes"></div> 

     </div> <!-- END OF BOXES WRAPPER --> 
</body>

CSS

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; 
} 
/* HTML5 display-role reset for older browsers */ 
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; 
} 



/*********************************** 
    MAIN CONTENT 
************************************/ 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 20px; 
    background-color: #c5c5c5; 
} 

.wrapper { 
    width: 70%; 
    margin: 0 auto; 
} 

.clearfix { 
    clear: both; 
} 

.button { 
    text-decoration: none; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: black; 
    background-color: yellow; 
    padding: 12px; 
    display: block; 
    text-align: center; 
    border-radius: 5px; 
    box-shadow: 0 2px 2px #999; 
    margin-top: 33px; 
} 

img { 
    width: 187px; 
    height: 187px; 
} 



/*********************************** 
    NAVIGATION 
************************************/ 


header { 
    height: 50px; 
    background-color: black; 
    color: white; 
    border-bottom: 4px solid yellow; 
} 

header h1 { 
    position: relative; 
    top: -8px; 
    display: inline-block; 
    color: yellow; 
    font-family: 'Merriweather', serif; 
    font-size: 1em; 
    padding: 10px 0; 
} 

.nav { 
    float: right; 
    position: relative; 
    margin-top: 13px; 
} 
/* 
.nav ul { 
    margin: 0px; 
}*/ 

.nav li { 
    display: inline; 
    list-style-type: none; 
    float: left; 
} 

.nav a:hover { 
    color: yellow; 
} 

.nav a { 
    /*display: block;*/ 
    /*line-height: 2em;*/ 
    /*padding: 10px 10px;*/ 
    padding-left: 10px; 
    padding-right: 10px; 
    color: white; 
    text-decoration: none; 
} 



.boxes { 
    /*position: relative;*/ 
    margin-top: 10px; 
    margin-right: 5px; 
    margin-left: 5px; 
    padding: 10px 10px; 
    display: inline-block; 
    background-color: #fff; 
    box-shadow: 0 2px 2px #999; 
    width: 187px; 
    height: 250px; 
} 





/*********************************** 
    FOOTER 
************************************/ 

footer { 
    overflow: hidden; 
    background-color: black; 
    color: white; 
    padding: 25px 0; 
}

источник

2014-09-23 J82

добавить min-width: 500px; в класс обертку, как это:

.wrapper { 
    width: 70%; 
    margin: 0 auto; 
    min-width: 500px; 
}

источник

2014-09-23 02:45:39

Навигация не будет внутри заголовка

ответ

Смежные вопросы