Flexbox 导航上的全宽不起作用

Question

我创建了一个 flexbox 网站，但是由于某种原因，导航不会以深蓝色背景全宽显示，而是以一个居中的框：

我也需要这个带背景的导航，但不知道怎么做

这是我在这部分的 CSS：

.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;
}

您可以在此处访问 JSFIDDLE 网站上的示例 FLexbox：https://jsfiddle.net/6qg5vuux/3/

你知道如何修复它并让它变得粘稠吗？

Answer 1

您可以将ID 放入您的header，然后输入以下CSS：

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

我设置了一个ID，因为它有一个更高的specificity。您也可以使用!important exception 来执行此操作，但不建议这样做，也不是滥用它的好主意。

另外，删除您的媒体查询中的 max-width 属性。

/* ================================= 
  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

看看

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

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

只需将宽度从 80% 更改为 100%。

Answer 3

放入主标题position:fixed;