Всем привет, никак не могу сделать нормальный header, хочу чтобы было на весь экран, но чтобы не делал не получается, Что можете сказать в такой ситуации? Код прикреплю, а если у кого есть какой-то пример или ссылка на header был бы рад
html:
<div id="photos-slider" class="slider-section">
<div class="slides-container" >
<!-- slide item 1 -->
<div class="slide-item" >
<img src="images/background2.jpg" alt="Slide 1" style="background-size: cover;"/>
</div>
<p class="goto-next">Подробнее<a class="arrow animated ci bounce" href="#service-section" style="padding-left: 15px;"><i class="fa fa-angle-down"></i></a></p>
</div>
</div>
<!-- Slider Section Over-->
<!-- Header Section -->
<header id="header-section" class="header-section">
<div class="col-md-2 col-sm-2 col-xs-6 logo-block">
<a href="#top"><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="col-md-10 col-sm-12 col-xs-12 menu-block">
<nav class="navbar navbar-default primary-navigation" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a href="#top">Главная</a></li>
<li><a href="#service-section">Рюкзак</a></li>
<li><a href="#our-work">Галерея</a></li>
<li><a href="#our-genius">Характеристики</a></li>
<li><a href="#demo">Отзывы</a></li>
<li><a href="#project-section">Доставка</a></li>
<li><a href="#project-section">Контакты</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</header>
css:
<div id="photos-slider" class="slider-section">
<div class="slides-container" >
<!-- slide item 1 -->
<div class="slide-item" >
<img src="images/background2.jpg" alt="Slide 1" style="background-size: cover;"/>
</div>
<p class="goto-next">Подробнее<a class="arrow animated ci bounce" href="#service-section" style="padding-left: 15px;"><i class="fa fa-angle-down"></i></a></p>
</div>
</div>
<!-- Slider Section Over-->
<!-- Header Section -->
<header id="header-section" class="header-section">
<div class="col-md-2 col-sm-2 col-xs-6 logo-block">
<a href="#top"><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="col-md-10 col-sm-12 col-xs-12 menu-block">
<nav class="navbar navbar-default primary-navigation" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><a href="#top">Главная</a></li>
<li><a href="#service-section">Рюкзак</a></li>
<li><a href="#our-work">Галерея</a></li>
<li><a href="#our-genius">Характеристики</a></li>
<li><a href="#demo">Отзывы</a></li>
<li><a href="#project-section">Доставка</a></li>
<li><a href="#project-section">Контакты</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</header>
Простой
