Уехал блок, так же браузер странно читает h3, какая ошибка в верстке?

0

у меня 2 проблемы, не могу найти ошибку, скачал исходный код с урока (Bootstrap 3,34 урок) но так и не нашел ошибку, первая проблема что левый блок после заполнения контейнера начал уезжать в низ ниже контента в правом блоке.

Вторая проблема в том, что при заполнение блога почему-то <div class="margin-8"></div> не создает отступа, так и если смотреть исходный код в браузере выходит так что h3 сейчас покрывает еще и картинки фильмов, в чем проблема найти не смог

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

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!--Style-->
    <link href="assets/css/style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid" style="">

      <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="container">

        <div class="row">

        <div class="col-lg-9 col-lg-push-3">

          <h2>Новые фильмы</h2>
          <hr>
          <div class="row">

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/inter.png" alt="Интерстеллар">
              <div class="film_label">Интерстеллар</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/matrix.png" alt="Матрица">
              <div class="film_label">Матрица</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/cloud.png" alt="Облачный атлас">
              <div class="film_label">Облачный атлас</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/max.png" alt="Безумный макс">
              <div class="film_label">Безумный Макс</div>
            </div>

          </div>

          <div class="margin-8"></div>

          <h2>Новые сериалы</h2>
          <hr>
          <div class="row">

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/xfiles.png" alt="Секретные материалы">
              <div class="film_label">Секретные материалы</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/silicon.png" alt="Кремневая долина">
              <div class="film_label">Кремневая долина</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/dead.png" alt="Ходячие мертвецы">
              <div class="film_label">Ходячие мертвецы</div>
            </div>

            <div class="film_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/breakingbad.png" alt="Во все тяжкие">
              <div class="film_label">Во все тяжкие</div>

          </div>

          <div class="margin-8"></div>

          <a href="#"><h3>Как снимали Интерстеллар</h3></a>
          <hr>
          <p>
            45 лет исполнилось Кристоферу Нолану - одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательным критикам, так и простым зрителям. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его послдение фильмы, добилась участия в проекте.
          </p>
          <a href="#" class="btn btn-warning pull-right">читать</a>

          <div class="margin-8"></div>

          <a href="#"><h3>Актер Том Хенкс поделился впечатлением о фестивале</h3></a>
          <hr>
          <p>
            16 февраля в Лондоне состоялась 67-я церемония вручения наград Британской киноакадемии. Леонардо ДиКаприо, Брэд Питт, Анджелина Джоли, Кейт Бланшет, Хелен Миррен, Эми Адамс, Кристиан Бэйл, Альфонсо Куарон и другие победители премии - в нашем репортаже.
          </p>
          <a href="#" class="btn btn-warning pull-right">читать</a>

          <div class="margin-8 clear"></div>

          

        </div>

        <div class="col-lg-3 col-lg-pull-9">

        cgjfngjkasdfhngjknsrfjngsjkn;

        </div>

        </div>

      </div>

      <div class="clear">
        
      </div>
    </div>
    <footer>
      <div class="container">
        <p class="text-center"><a href="httpe://ru.wh-db.com">WH-DB.COM</a></p>
      </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>
html
bootstrap 3

2 ответов

0

Нашел 1 не закрытый див, и блок вернулся в нужное место, но проблема с заголовком осталась...

0

У меня такое впечатление, что какой то див незакрыт в вашем коде. Нужно по всем группам дивов пройтись и в редакторе нажимать слева где номера строк кода на плюс и минус, чтобы div сворачивался и разворачивался и так каждый проверить на наличие закрывающего тега, я так делал. Или с смотреть этот код и его сравнивать:

https://fructcode.com/ru/courses/bootstrap/interactive-main-page-buttons-bootstrap/

Sign up or Log in to write an answer