1

Откуда появляются отступы у блока?

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

body {
  font-family: "Quicksand", sans-serif;
  color: #8D96BD;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style-type: none;
}

.container {
  width: 1206px;
  margin: 0 auto;
}

.header {
  background: #fff;
}

.container-inner {
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
}

.left-content {
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: relative;
}

.left-content .logo-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: #5E81FE;
  border-radius: 50%;
}

.left-content .menu {
  display: inline-block;
  margin-left: 73px;
}

.left-content .menu li {
  display: inline-block;
}

.left-content .menu li a {
  text-decoration: none;
  color: #697CA6;
  margin-right: 20px;
  font-size: 12px;
  line-height: 15px;
}

.left-content .menu li a:hover {
  color: #5E81FE;
}

.left-content .menu li:last-child {
  margin: 0;
}

.right-content {
  display: flex;
  align-items: center;
}

.right-content .link {
  display: flex;
  margin-right: 9px;
}

.right-content .link ul li {
  display: inline-block;
  margin-right: 35px;
}

.right-content .link ul li a:hover svg path {
  fill: #6188FF;
}

.right-content .btn-get {
  background: #D2E1FF;
  border-radius: 2px;
  color: #3A79FF;
  text-decoration: none;
  padding: 13px 16px;
}

.sup-title {
  font-size: 10px;
  line-height: 12px;
  color: #3D4F9F;
  margin-top: 92px;
}

.title {
  font-size: 48px;
  line-height: 60px;
  line-height: 60px;
  font-weight: 300;
  color: #3D4F9F;
  margin-top: 16px;
}

.title span {
  font-weight: 500;
}

.description {
  display: flex;
  text-align: center;
  margin: 28px 0 20px 0;
  max-width: 500px;
  color: #8D96BD;
  font-weight: normal;
  font-size: 15px;
}

.productivity {
  background: #F5F8FF;
  min-height: 570px;
}

.productivity .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
}

.productivity .content .btn-play {
  display: inline-block;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  background: #fff url(../img/Polygon.png) center no-repeat;
}

.promo {
  height: 145px;
  margin: 0;
}

.promo .list {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.promo .list-link:not(:last-child) {
  margin-right: 76px;
  line-height: 145px;
}

.plan {
  background: #000;
}


/*# sourceMappingURL=style.css.map */
<header div class="header">
  <div class="container">
    <div class="container-inner">
      <div class="left-content">
        <div class="logo">
          <a class="logo-link" href="#"></a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Documentation</a></li>
          </ul>
        </nav>
      </div>

      <div class="right-content">
        <div class="link">
          <ul>
            <li>
              <a href="#">
                <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.65597 17V9.24548H8.22501L8.60969 6.2234H5.65597V4.294C5.65597 3.41904 5.89578 2.82278 7.13417 2.82278L8.71368 2.82208V0.119112C8.44051 0.0822826 7.5029 -1.65981e-08 6.41206 -1.65981e-08C4.13475 -1.65981e-08 2.57564 1.40836 2.57564 3.9947V6.2234H-2.3404e-08V9.24548H2.57564V17H5.65597Z"
                                                fill="#B6BAC7" />
                                        </svg>

              </a>
            </li>
            <li>
              <a href="#">
                <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M6.04945 8.72806L11.4957 12.5768C12.1172 12.9048 12.5657 12.735 12.7205 12.0249L14.9374 2.03246C15.1644 1.16206 14.5906 0.76729 13.996 1.02547L0.978404 5.82666C0.0898302 6.16756 0.0950105 6.64173 0.816436 6.85301L4.15705 7.85032L11.8909 3.18335C12.256 2.97158 12.5911 3.08543 12.3161 3.31891"
                                                fill="#B6BAC7" />
                                        </svg>

              </a>
            </li>
            <li>
              <a href="#">
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M17.0328 1.84041C16.4253 2.11761 15.7726 2.30417 15.0877 2.38898C15.7868 1.95807 16.3239 1.27594 16.5767 0.46342C15.9222 0.862259 15.1973 1.15191 14.4257 1.308C13.8081 0.631966 12.9276 0.210602 11.9535 0.210602C10.0832 0.210602 8.56631 1.76886 8.56631 3.69017C8.56631 3.96313 8.59598 4.22867 8.65402 4.48334C5.83853 4.33759 3.3424 2.95159 1.67204 0.847419C1.38053 1.36154 1.2135 1.95887 1.2135 2.59648C1.2135 3.80359 1.81147 4.86853 2.72005 5.49303C2.16541 5.47448 1.64276 5.31812 1.18615 5.05709V5.10081C1.18615 6.7876 2.35476 8.19347 3.90258 8.51347C3.61882 8.59297 3.31957 8.63537 3.01181 8.63537C2.79357 8.63537 2.581 8.61417 2.37462 8.5731C2.80543 9.95591 4.05659 10.9619 5.53864 10.99C4.37931 11.9228 2.91868 12.4793 1.33113 12.4793C1.05768 12.4793 0.788618 12.4634 0.523682 12.4308C2.02249 13.4183 3.80327 13.9944 5.71599 13.9944C11.946 13.9944 15.3531 8.69155 15.3531 4.09365C15.3531 3.94259 15.3498 3.79286 15.3433 3.64313C16.0053 3.15286 16.5798 2.53937 17.0338 1.84107"
                                                fill="#B6BAC7" />
                                        </svg>

              </a>
            </li>
            <li>
              <a href="#">
                <svg width="17" height="14" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.0001 2.10651H16.3472C16.1047 2.10651 15.7619 2.45072 15.7619 2.67109V10.6583C15.7619 10.8789 16.1047 11.1796 16.3472 11.1796H17.0001V13.0755H11.084V11.1796H12.3223V2.78361H12.2616L9.36999 13.0755H7.13129L4.277 2.78361H4.20477V11.1796H5.44303V13.0755H0.48999V11.1796H1.12422C1.38542 11.1796 1.72825 10.8789 1.72825 10.6583V2.67109C1.72825 2.45072 1.38542 2.10651 1.12422 2.10651H0.48999V0.210635H6.68355L8.717 7.65872H8.77295L10.8252 0.210635H17.0001V2.10651Z"
                                                fill="#757E9A" />
                                        </svg>

              </a>
            </li>
          </ul>
        </div>
        <div class="btn">
          <a class="btn-get" href="#">Ger started</a>
        </div>
      </div>
    </div>
  </div>
  </div>
</header>
<section class="productivity">
  <div class="container">
    <div class="productivity-inner">
      <div class="content">
        <h1 class="sup-title">PLAN YOUR LIFE</h1>
        <div class="title">Increase your <span>productivity</span></div>
        <div class="description">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</div>
        <a class="btn-play"></a>
      </div>
    </div>
  </div>
</section>
<section class="promo">
  <div class="container">
    <div class="promo-inner">
    </div>
  </div>
</section>
<section class="plan">
  <div class="container">
    <div class="plan-inner">
      <div class="content">
        <div class="sup-title">
          DESKTOP AND MOBILE APP
        </div>
        <div class="title">
          <span>Plan</span> and <span>manage</span>
        </div>
        <div class="description">
          Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata. Solum patrioque no sea. Mea ex malis mollis oporteat. Eum an expetenda consequat.
        </div>
        <div class="btn-block">
          <a class="view" href="#">View video</a>
          <a class="see" href="#">See features</a>
        </div>
      </div>
      <div class="foto">
        <img src="../icons/illustration.svg" alt="">
      </div>
    </div>
  </div>
</section>

11
  • Приложите css-код, пожалуйста
    – artomich
    7 июн 2020 в 19:15
  • С таким css, как Вы кинули, Вам вряд ли кто поможет
    – Вадим
    7 июн 2020 в 19:42
  • а если так то нормально?
    – alex071105
    7 июн 2020 в 19:45
  • Отступы не совсем корректные, не совсем читабельно, но уже лучше. А еще желательно HTML прикреплять
    – Вадим
    7 июн 2020 в 19:54
  • в каком месте? я исправлюсь
    – alex071105
    7 июн 2020 в 19:55

1 ответ 1

0

Всего лишь нужно было отключить все внешние и внутренние отступы

0

Ваш ответ

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

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