Делаю меню (burger button). Почему вместо трех полосок две?

Question

[alexxxey_code]

Как у меня :
И как должно быть:

<header class="header">
	<div class="container">
		<div class="header__inner">
			<div class="header__logo">
				<img src="images/activebox-logo.png" alt="">
			</div>
				<nav class="nav">
					<a class="nav__link" href="#">FEATURES</a>
					<a class="nav__link" href="#">WORKS</a>
					<a class="nav__link" href="#">OUR TEAM</a>
					<a class="nav__link" href="#">TESTIMONIALS</a>
					<a class="nav__link" href="#">DOWNLOAD</a>
		    	</nav>
		    	<button class="burger" type="button">
		    		<span class="burger__item">Menu</span>
		    	</button>
		</div>
	</div>	
</header>

СSS:

.burger{
	display: none;
	background: none;
	border: 0;
	padding: 9px 2px;
	cursor: pointer;
}

.burger__item{
	display: block;
	width: 28px;
	height: 3px;

	background-color: #fff;

	font-size: 0;
	color: transparent;

	position: relative;

}
.burger__item:before,
.bureger__item:after{
	content: "";
	height: 100%;

	background-color: #fff;

	position: absolute;
	right: 0;
	z-index: 1;
}

.burger__item:before{
	width: 30px;
	top: -8px;
}

.burger__item:after{
	width: 26px;
	bottom: -8px;
}

Comments

[Sand]

Пашенька, вместе с тэгом вопроса

Answer 1

[Владислав Черненко]

очепятка:

.burger__item:before,
.bureger__item:after{
...
}

Comments

[i_m]

:D

[alexxxey_code]

спасибо