Flexbox导航上的全宽不起作用

Question

I created a flexbox site however for some reason the navigation won't appear in full width with a dark blue background color instead a box that centers:

I also need this navigation with the background sticky but don't know how to do it

Here's my CSS on this part:

.name {
    font-size: 1.35em;
    margin: 0;
}
.main-nav {
    margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}
.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}
.main-nav a:hover {
    color: #093a58;
}



/* ---- Layout Containers ---- */

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
    background-color: red;
}
.banner,
.main-footer {
    text-align: center;
}
.banner {
    color: #fff;
    background-color: #18bc9c;
    padding: 6.5em 0;
    margin-bottom: 32px;
}
.col {
    padding-right: 1em;
    padding-left: 1em;
}
.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
    width: 256px;
}
.headline,.tagline {
    margin: 0;
    color: #fff;
}
.feat-img {
    border-radius: 5px;
}

You can visit the sample FLexbox on JSFIDDLE site here: https://jsfiddle.net/6qg5vuux/3/

Do you know how to fix it and make it sticky?

Answer 1

You can put an ID to your header and then put the following CSS :

#header{
  width: 100%;
  background-color: darkblue;
}

I have set an ID because it has a higher specificity . You could also do it using !important exception but this is not recommended and is not a good idea to abuse of it.

Also, remove your max-width property on your media query.

 /* ================================= Base Element Styles ==================================== */ * { box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; line-height: 1.5; color: #e74c3c; margin: 0; } ul { margin: 0; padding: 0; list-style: none; } p { font-size: .95em; } h1{ font-size: 4em; } h2, h3, a { color: #093a58; } h2, h3 { margin-top: 0; } a { text-decoration: none; } img { max-width: 100%; } /* ================================= Base Layout Styles ==================================== */ /* ---- Navigation ---- */ .name { font-size: 1.35em; margin: 0; } .main-nav { margin-top: 5px; } .name a, .main-nav a { text-align: center; display: block; padding: 10px 15px; } .main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; } .main-nav a:hover { color: #093a58; } /* ---- Layout Containers ---- */ #header{ width: 100%; background-color: darkblue; } .main-header { padding-top: .5em; padding-bottom: .5em; background-color: red; } .banner, .main-footer { text-align: center; } .banner { color: #fff; background-color: #18bc9c; padding: 6.5em 0; margin-bottom: 32px; } .col { padding-right: 1em; padding-left: 1em; } .main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; } /* ---- Page Elements ---- */ .logo { width: 256px; } .headline,.tagline { margin: 0; color: #fff; } .feat-img { border-radius: 5px; } /* ================================= Media Queries ==================================== */ @media (min-width: 769px) { .main-header, .row, .footer-inner{ width: 80%; margin: 0 auto; } .tagline { font-size: 1.4em; } } /* ================================= Base Styles ==================================== */ body { display: flex; flex-direction: column; min-height: 100vh; } .row { flex: 1; } /* ================================= Media Queries ==================================== */ @media (min-width: 769px) { .main-header, .main-nav { display: flex; } .main-header { flex-direction: column; align-items: center; } } @media (min-width: 1025px) { .main-header { flex-direction: row; justify-content: space-between; } } 

 <header id="header" class="main-header"> <h1 class="name"><a href="#">MY SITE</a></h1> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Features</a></li> <li><a href="#">Examples</a></li> </ul> </header><!--/.main-header--> <div class="banner"> <img class="logo" src="img/flex.png"> <h1 class="headline">BOY</h1> <span class="tagline">VOILA THIS IS IT!</span> </div><!--/.banner--> <div class="row"> <div class="primary col"> <h2>Welcome!</h2> <p>Everything in this city is worth waiting in line for!</p> </div><!--/.primary--> </div> <footer class="main-footer"> <div class="footer-inner"> <span>&copy;2015 Residents of The Best City Ever.</span> <p>Macaroon oat cake sugar plum liquorice sweet pastry bear claw. Biscuit candy liquorice toffee cupcake donut candy cupcake. Chupa chups marzipan ice cream jelly beans macaroon cookie bear claw. Lemon drops sweet cake pie powder bear claw topping. Wafer caramels bear claw chupa chups candy canes pastry apple pie. Liquorice croissant danish sweet roll cake jelly. Chocolate bar chocolate bar caramels cotton candy marzipan bear claw pudding. Icing icing jelly-o lemon drops.</p> </div> </footer> 

Answer 2

Look at

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
    .main-header,
    .row,
  .footer-inner{
        width: 80%;
        margin: 0 auto;
        max-width: 1150px;
    }

and just change width from 80% to 100%.

Answer 3

放在主标题position:fixed;