Верстаю по сетке bootstrap. Сначала я вставил картинку как
position: absolut; left: 0; top: 0; и все было хорошо, но решив сделать по людски, то есть через тег <img>, картинка дала сбой и ушла вправо, что? почему? как?:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Silent</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/media.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="background_img_section1"></div>
<div class="col-lg-12">
<nav class="main_menu">
<ul class="menu">
<li><a href="#">главная</a></li>
<li><a href="#">афиша</a></li>
<li><a href="#">видео</a></li>
<li><a href="#">пресса</a></li>
</ul>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h1>твой<br>край тишины</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="line_img">
<a href="#"><img src="img/line.png" alt="line"></a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div>
<img src="img/background/ggddcc.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
</body>
</html>:
* {
margin: 0;
padding: 0;
font-weight: normal;
/*Что бы не вычитывалась ширина и высота при указании внутренних padding*/
box-sizing: border-box;
/*----------------------------------*/
}
::selection {background: #FF99FF;} /* Цвет выделения текста */
a:visited,a:hover,a:active,a:focus{text-decoration: none;}
/*----section1----*/
.background_img_section1 {
background-image: url(../img/background/jjkkuu.jpg);
background-repeat: no-repeat;
width: 1920px;
height: 1001px;
}
.main_menu {
width: 100%;
text-align: center;
display: inline;
vertical-align: middle;
}
.menu {
list-style: none;
margin-top: 62px;
}
.menu li a {
text-transform: uppercase;
font-size: 1.3em;/*18px*/
color: #000;
font-family: 'RobotoSlabLight';
letter-spacing: 5px;
}
.menu li a:hover {
text-shadow: 0 0 1px #fff;
}
li {
padding-right: 92px;
display: inline-block;
}
li:last-child {
padding-right: 0;
}
h1 {
font-size: 5.3em; /*72px*/
text-align: center;
margin-top: 216px;
font-family: 'RobotoSlabThin';
text-transform: uppercase;
text-shadow: 0 0 25px #000;
letter-spacing: 1px
}
.line_img {
margin: 0 auto;
text-align: center;
margin-top: 267px;
}