0

введите сюда описание изображения

body {
  font-family: 'Oswald', sans-serif;
}

img {
  width: 196px;
  height: auto;
}

h3 {
  font-size: 24px;
}

form {
  padding-top: 15px;
}

input[type=submit] {
  margin-top: 5px;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  position: relative;
  padding-top: 15px;
  width: 100%;
  height: 170px;
  text-align: center;
}

.item h3 {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
}

.main {
  margin-top: 15px;
}

.menu {
  padding-top: 40px;
}

.content {
  text-align: center;
}

.contact-us {
  text-align: center;
  padding-top: 10%;
}

.footer {
  font-size: 8px;
  position: absolute;
  padding-left: auto;
  padding-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>PayLab</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://paylab.tk/css/main.css">
  <style>
    img[alt="www.000webhost.com"] {
      display: none;
    }
  </style>
</head>

<body>
  <div class="menu">
    <div class="container">
      <div class="logo col-xl-3">
        <a href="https://paylab.tk/"><img src="https://paylab.tk/img/logo.png" alt=""></a>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="container">
      <div class="items">
        <div class="item col-xl-3 offset-sm-3">
          <img src="https://paylab.tk/img/item1.png" alt="">
          <h3><a href="https://paylab.tk/mts.php/">Мтс</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item2.png" alt="">
          <h3><a href="https://paylab.tk/megafon.php/">МегаФон</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item3.png" alt="">
          <h3><a href="https://paylab.tk/beline.php/">Билайн</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item4.png" alt="">
          <h3><a href="https://paylab.tk/rostelecom.php/">Ростелеком</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item5.png" alt="">
          <h3><a href="https://paylab.tk/motiv.php/">Мотив</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item6.png" alt="">
          <h3><a href="https://paylab.tk/yota.php/">Yota</a></h3>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1 ответ 1

0

Убрать класс offset-sm-3 для первого блока или прописать margin-left: 0 что я и сделал в коде ниже

body {
  font-family: 'Oswald', sans-serif;
}

.offset-sm-3 {
  margin-left: 0 !important;
}

img {
  width: 196px;
  height: auto;
}

h3 {
  font-size: 24px;
}

form {
  padding-top: 15px;
}

input[type=submit] {
  margin-top: 5px;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  position: relative;
  padding-top: 15px;
  width: 100%;
  height: 170px;
  text-align: center;
}

.item h3 {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
}

.main {
  margin-top: 15px;
}

.menu {
  padding-top: 40px;
}

.content {
  text-align: center;
}

.contact-us {
  text-align: center;
  padding-top: 10%;
}

.footer {
  font-size: 8px;
  position: absolute;
  padding-left: auto;
  padding-right: auto;
  left: 0;
  right: 0;
  bottom: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>PayLab</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://paylab.tk/css/main.css">
  <style>
    img[alt="www.000webhost.com"] {
      display: none;
    }
  </style>
</head>

<body>
  <div class="menu">
    <div class="container">
      <div class="logo col-xl-3">
        <a href="https://paylab.tk/"><img src="https://paylab.tk/img/logo.png" alt=""></a>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="container">
      <div class="items">
        <div class="item col-xl-3 offset-sm-3">
          <img src="https://paylab.tk/img/item1.png" alt="">
          <h3><a href="https://paylab.tk/mts.php/">Мтс</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item2.png" alt="">
          <h3><a href="https://paylab.tk/megafon.php/">МегаФон</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item3.png" alt="">
          <h3><a href="https://paylab.tk/beline.php/">Билайн</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item4.png" alt="">
          <h3><a href="https://paylab.tk/rostelecom.php/">Ростелеком</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item5.png" alt="">
          <h3><a href="https://paylab.tk/motiv.php/">Мотив</a></h3>
        </div>
        <div class="item col-xl-3">
          <img src="https://paylab.tk/img/item6.png" alt="">
          <h3><a href="https://paylab.tk/yota.php/">Yota</a></h3>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Ваш ответ

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

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