макет в Pixel Perfect не совпадает с контейнером в моем браузере, то есть криво ложиться

Question

мучаюсь уже 2 день. Взял картинку макета с Figma обрезал ее до 1900px что бы влезла в браузер. Контейнер указал как в макете, 1230px + 30px так как падинги по 15px с каждой стороны. В итоге накладываю на свою верстку и не совпадает по ширине. Лого находиться куда левее, чем на Pixel Pefrect, появляется вертикальный скролл. В чем заключается проблема?

Вот свойства контейнера:

.container {
  margin: 0 auto;
  padding: 0 15px
  max-width: 1260px
}

Код самого header

.header{
  background-color: var(--light-color);

  &__container{
    @include flex-all-sb;
  }
}

.nav{
  &__list{
    @include flex-v-center;
  }

  &__item{
    &:not(:last-child){
      margin-right: 40px;
    }
  }

  &__link{
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    color: var(--gray800-color);
  }
}

.header-contacts{
  @include flex-v-center;

  &__link{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

.contacts-link{
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  padding-left: 60px;


  &__caption{
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    color: var(--gray800-color);
  }

  &__value{
    font-family: 'Ubuntu';
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--gray900-color);
  }

  &--call{
    background-image: url('../img/phone.svg');
  }

  &--mail{
    background-image: url('../img/chat.svg');
  }
}

<header class="header header--main">
  <div class="container header__container">
    <a href="#" class="header__logo">
      <img src="img/logo.svg" alt="Logo" />
    </a>
    <nav class="nav" title="Навигация">
      <ul class="nav__list list-reset">
        <li class="nav__item"><a href="#" class="nav__link">About Us</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Services</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Work</a></li>
        <li class="nav__item"><a href="#" class="nav__link">News</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Contacts</a></li>
      </ul>
    </nav>
    <div class="header-contacts">
      <a href="tel:4055550128" class="header-contacts__link contacts-link contacts-link--call">
        <span class="contacts-link__caption">Call us</span>
        <span class="contacts-link__value">(405) 555-0128</span>
      </a>
      <a href="mailto:[email protected]" class="header-contacts__link contacts-link contacts-link--mail">
        <span class="contacts-link__caption">Talk to us</span>
        <span class="contacts-link__value">[email protected]</span>
      </a>
    </div>
  </div>
</header>

Answer 1

пока у тебя пустая страница и нет у нее скролла, не совпадет, будет смещение. В разных браузерах разное в среднем 9-11 пикселей. Либо смещай в пиксель-перфект картинку, либо временно задай блоку внутри боди большую высоту что бы скролл появился. И вообще проверь в фигме расстояния по бокам, может они там разные)

БЛОГ НА HUSL

макет в Pixel Perfect не совпадает с контейнером в моем браузере, то есть криво ложиться

Ответы (1 шт):