html - 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>