Появляются странные рамки на мобильной версии сайта, если один блок полностью перекрывает другой, который с фоном

Question

Пытаюсь адаптировать под мобильную версию сайт и заметил что при переходе на маленький экран начинают проявляться странные рамки:

*Добавил скрин с телефона (вид от основного сайта)

*Добавил скриншот на котором отсутствует img, но проблема осталась

Пытался добавить "border: none;", но не помогло. Вот пример фрагмента с багом:

.sectionHeader {
    margin: 0 0 30px 0;
}

.newsColorLine {
    background-color: #000;
    height: 50px;
    display: flex;
}

h2 { 
    font-style: normal;
    font-weight: normal;
    font-size: 27px;
    line-height: 30px;
    text-align: center;
    color: #000;
    padding: 12px 20px 0 20px;
    background: #fff;
    height: 100%;
    margin: 0;
}

<div class="sectionHeader">
  <div class="newsColorLine">
    <img src="./img/news/News.svg" alt="news">
    <h2>What’s new?</h2>
  </div>
</div>

Answer 1

Картинка тоже блочный элемент, ~~inline-block~~ и у неё тоже есть свои атрибуты и css (стили).

Computed properties CHROME:

display     block
height      50px
width       48.8906px

По поводу display: block видимо в хроме, картинка совсем блок... Так-что и подавно получает все свойства блока из коробки.

/** CSS */
IMG {
  /* свойства CSS для картинки? */
}

БЛОГ НА HUSL

Появляются странные рамки на мобильной версии сайта, если один блок полностью перекрывает другой, который с фоном

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