Почему появился скрол справа и внизу?

Сделал всё как показано на видео!

BooStrap. Видео из 26 урока

http://prntscr.com/lzctm8

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>КиноМонстер на BootStrap</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid">
		<div class="row">
		    
			<nav role="navigation" class="navbar navbar-inverse">
				<div class="container">
				    
					<div class="navbar-header header">

						<div class="container">
							<div class="row">
								<div class="col-lg-12">
									<h1><a href="#">КиноМонстер</a></h1>
									<p>Кино - наша страсть!</p>
								</div>
							</div>
						</div>
          
						<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
      						<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="navbarCollapse" class="collapse navbar-collapse navbar-right">
						<ul class="nav nav-pills">
							<li class="active"> <a href="#">Главная</a> </li>
							<li> <a href="#">Фильмы</a> </li>
							<li> <a href="#">Сериалы</a> </li>
							<li> <a href="#">Рейтинг фильмов</a> </li>
							<li> <a href="#">Контакты</a> </li>
						</ul>
					</div>
					
				</div>
			</nav>
			
		</div>
	</div>

	<div class="wrapper">
		<div class="conteiner">
			<div class="row">
				<div class="col-lg-9">
					Правый блок
				</div>

				<div class="col-lg-3">
					Левый блок
				</div>
			</div>
		</div>
		<div class="clear"></div>

	<footer>
		<div class="conteiner">
			<p  class="text-center"><a href="#">by LogDog - konomonster.ru</a></p>
		</div>
	</footer>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

CSS

html, body {
	height: 100%;
}

.header a {
	color: #f0ad4e;
	text-decoration: none;
}

.header a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header h1 {
	letter-spacing: 15px;
	font-size: 300%
}

.header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}

.navbar-inverse {
	border-radius: 0 !important;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff !important;
    background-color: #346270 !important;;
}

.nav-pills>li>a {
	color: #fff !important;;
}

.nav-pills>li>a:hover {
	background-color: #346270 !important;;
}

.navbar-inverse {
    padding: 1%;
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
		text-align: center;
	}
	
	.header h1 {
		letter-spacing: 5px;
		font-size: 280%;
	}

	.header{
		text-align: center;
	}
}

.clear {
	clear: both;
	height: 63px;
}

.wrapper {
	min-height: 100%;
}

footer {
	color: #666;
	background-color: #222;
	padding: 17px 0 18px 0;
	border-top: 1px solid #000;
}

footer a {
	color: #999;
	text-decoration: none;
}

footer a:hover {
	color: #efefef;
	text-decoration: none;
}

html

css

1 ответов

Вы неверно называете классы Bootstrap:

<div class="conteiner">

должно быть так:

<div class="container">