0

Ребят. почему сетка бустрап позиционируется не по центру? Проблема с 126 строки. Буду очень признателен!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {}

.wrapper {
  max-width: 1920px;
  margin: 0 auto;
}

#logo {
  font-family: 'Poiret One', cursive;
  float: left;
  padding-left: 60px;
  color: white;
  font-size: 50px;
  padding-top: 55px;
}

.header {
  width: 100%;
  height: 800px;
  background: black;
}

.awesome {
  color: white;
}

a {
  transition: 0.6s;
  color: white;
  /* Цвет обычной ссылки */
  text-decoration: none;
  /* Убираем подчеркивание у ссылок */
}

a:visited {
  color: white;
  /* Цвет посещённой ссылки */
}

a:hover {
  color: red;
  text-decoration: none;
}

i {
  padding-right: 7px;
}

h1 {
  color: white;
  text-align: center;
  padding-top: 200px;
  font-size: 50px;
  font-family: 'Poiret One', cursive;
}

#about {
  color: #FCAC45;
  text-align: center;
  font-size: 30px;
  font-family: 'Poiret One', cursive;
  padding-top: 20px;
}

#about2 {
  color: #FCAC45;
  text-align: center;
  font-size: 40px;
  font-family: 'Poiret One', cursive;
  padding-top: 40px;
}

.content {
  max-width: 1920px;
  background: #F5F5F5;
}

.aboutme {
  background: white;
  padding: 20px 20px;
  margin: 0 0 20px;
  text-align: center;
}

.text-box {
  color: black;
  font-family: 'Poiret One', cursive;
  font-size: 20px;
  margin-top: 10px;
  font-weight: 600;
  margin-bottom: 30px;
}

span {
  color: black;
  font-size: 48px;
}

h3 {
  margin-top: 25px;
  font-size: 20px;
  color: black;
  font-family: 'Poiret One', cursive;
  margin-bottom: 30px;
  font: 730 22px/1.2 Raleway, sans-serif;
  word-break: break-word;
}

h4 {
  text-align: center;
  padding-top: 50px;
  font-size: 60px;
  font-family: 'Poiret One', cursive;
  margin-bottom: 30px;
}

.line1 {
  text-align: center;
  margin-bottom: 50px;
}

.fixblock {
  padding: 30px 15px 80px
}

.portfolio {
  background: black;
}

h5 {
  color: white;
  text-align: center;
  padding-top: 50px;
  font-size: 60px;
  font-family: 'Poiret One', cursive;
  padding-bottom: 30px;
}

.text-aboutmee {
  color: white;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 30px;
  font-family: 'Poiret One', cursive;
  padding-bottom: 100px;
}

.myjobs {}

.myrobs {
  height: 200px;
  width: 300px;
  background: black;
  padding: 20px 20px;
  margin: 0 0 20px;
}

.job {}

.jov {
  margin-top: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Just Terrora</title>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.css">

  <link rel="stylesheet" type="text/css" href="css/main.css" media="screen,projection">

  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

  <!--Шрифты-->
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

  <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>


  <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

  <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

  <div class="wrapper">
    <div class="header">
      <p id="logo">©Just Terrora</p>
      <h1>Добро пожаловать</h1>
      <p id="about">На мой сайт , посвященный<br> моей деятельности. Так же на нем <br>присутствует мое портфолио и мои контакты.<br></p>
      <p id="about2">"Красота в простоте"</p>


    </div>

    <div class="content">
      <h4>Моя стихия</h4>
      <p class="line1"><img src="img/line.png"></p>


      <div class="container fixblock">

        <div class="row">

          <div class="col-sm-4">

            <div class="aboutme">

              <div class="icon-box">
                <span><i class="fab fa-fort-awesome"></i></span>
                <div class="title-box">
                  <h3>Веб Программирование</h3>
                  <div class="text-box">
                    "Человек приходит в мир не для того, чтобы быть счастливым, а чтобы созидать и оставить после себя нечто великое."
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">

            <div class="aboutme">

              <div class="icon-box">
                <span><i class="fas fa-magic"></i></span>
                <div class="title-box">
                  <h3>Веб Дизайн</h3>
                  <div class="text-box">
                    "Творец в каждую работу вкладывает душу, и никогда не повторяется. Только ремесленник делает копии."
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">

            <div class="aboutme">

              <div class="icon-box">
                <span><i class="fas fa-info"></i></span>
                <div class="title-box">
                  <h3>Консультация</h3>
                  <div class="text-box">
                    "Правильное время для начала вашей следующей работы — это не завтра и не на следующей неделе, а прямо сейчас."


                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="portfolio">
        <div class="title-about">
          <h5>Обо мне</h5>
        </div>
        <div class="line1">
          <img src="img/line.png">
        </div>
        <div class="text-aboutme">
          <p class="text-aboutmee">Меня зовут Александр, мне 18 лет, живу в Москве. C 2017 года специализируюсь на Web-Tехнологиях и профессионально занимаюсь созданием сайтов. Так же работаю над интересными проектами. На данный момент, имею опыт комплексной разработки сайтов
            под ключ, включая этапы проектирования и разработки дизайна, верстки макета, размещения сайта на хостинге. При создании сайтов использую язык Node.js Мной выполнены проекты различной сложности</p>
        </div>
      </div>

      <div class="myjobs">
        <div class="jobs">
          <h4>Мои работы</h4>
        </div>

        <div class="line1">
          <img src="img/line.png">
        </div>


        <div class="container fixblock">

          <div class="row ">

            <div class="jov">
              <div class="col">

                <div class="job">

                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>
                </div>
              </div>
            </div>

            <div class="jov">
              <div class="col">

                <div class="job">

                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>

                </div>
              </div>
            </div>

            <div class="jov">
              <div class="col">

                <div class="job">

                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>
                </div>
              </div>
            </div>

            <div class="jov">
              <div class="col">

                <div class="job">

                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>

                </div>
              </div>
            </div>

            <div class="jov">
              <div class="col">

                <div class="job">
                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>

                </div>
              </div>
            </div>

            <div class="jov">
              <div class="col">

                <div class="job">
                  <a href=""><img src="https://cdn.flamp.ru/d65e110d889b93b36bd6a9434c160d9e.jpg"></a>

                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

2
  • вообше то твой блок в центре только субблоки не правильно спозиционировани
    – Randall
    5 апр 2018 в 20:07
  • @Избытоксусликов каким образом нужно сделать? 5 апр 2018 в 20:11

1 ответ 1

0

Добавь к своему классу jov проста flex-basis как показано внизу и все

.jov{
    margin-top: 30px;
    flex-basis: 33.3%; 
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.