Пространство у изображения после width

Возможно очень легкий вопрос, но я новичек в этом и не нашел решения. Мне нужно разместить иконку "крестика" сверху справа страницы, использую флекс. После применения width: 12% у изображения появляется невидимый отступ, как его убрать?

Ссылка с кодом

            <div class="product-photo-view-header">
            <div class="close-button">
                <a href="#">
                    <img src="https://i.imgur.com/S83HZ33.png" alt="">
                </a>
            </div>
        </div>

.product-photo-view {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 1;
}

.product-photo-view-header {
  display: flex;
  background-color: #1d1d;
  height: 100px;
  padding: 0 20px;
  justify-content: flex-end;
  align-items: center;
}

.close-button {
  float: right;
}

.close-button img {
  width: 12%;
}