Позиционирование сетки по центру

305

07 апреля 2018, 18:38

Ребят. почему сетка бустрап позиционируется не по центру? Проблема с 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>

Answer 1

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Обрезанный блок

В верстке нубНужно сделать видимыми и кликабельными все элементы меню

163

HTML

Парсинг Instagramm на C#

День добрый,товарищиНа днях решил написать первый парсер

257

HTML

Символ “рубль” для всех устройств

Использую такой знак ₽ на сайте, но на старых мобильных устройствах он отображается так □Подскажите, пожалуйста, как лучше всего его оптимизировать...

296

HTML

несколько таблиц exceljs

доброго времени суток, могу поинтересоваться кто пользовался библиотекой exceljs ??? нужен экспорт нескольких таблиц в эксельный документ формата...

214