Как правильно сверстать, чтоб не было прокрутки?

Question

[Mak354]

В общем, есть большая картинка на всю ширину окна браузера, она выходит за его пределы, есть небольшая полоса прокрутки вбок, я вроде родительскому блоку задал overflow hidden но не помогло, в общем вот код, помогите пожалуйста

<div class="header-block">
	      <div class="header-block-bg">
                    <img src="../img/compress/header-img.png" class="header-block-bg__img">
             </div>
     </div>

.header-block {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     position: relative; 
}
  .header-block-bg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: -1; 
}

Comments

[Hyubert]

* {
   box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

[Mak354]

Hyubert, не помогло, у меня уже подключен reset.css, а border-box тоже не помог

Answer 1

[FabiBoom]

картинке - max-width: 100%
.header-block - ширину лучше в процентах задать (100%)

Comments

[Mak354]

да, max-width поменял на 100% и получилось, прокрутка изчезла, а насчет картинки не то, она становится мелкой и посередине прям, но уже все получилось спасибо большое)