Элемент отлипает от края при маленьком размере окна

Question

есть такой код, который создает кружок и задвигает его на половину за экран, но если начинать уменьшать viewport, то он отлипает от края и начинает двигаться в центр, почему?

.elipse-1 {
    position: absolute;
    overflow-x: hidden;
    top: 17.938rem;
    right: 0;
    width: 2rem;
    height: 2rem;
}

.elipse-1::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    border-radius: 50%;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05);
    background: linear-gradient(180deg, #ff8e8e 0%, #f62424 100%);
    transform: translateX(50%);
}

    <div>
        <div class="elipse-1"></div>
    </div>

Answer 1

Посмотрел, проблемы из-за этого:

.main-content {
text-align: center;
/* min-width: 50rem; */ -- это раз}

И два:

.main-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3.75vw;
margin-bottom: 3.75vw;
height: 3.125rem;
/* min-width: 50rem; */ -- это два }

БЛОГ НА HUSL

Элемент отлипает от края при маленьком размере окна

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