Как избежать переполнения div без обрезки поля родительского div ⇐ CSS

[Anonymous]

Я хочу остановить переполнение элемента div в конце порта просмотра.
Вот код:
HTML

Код: Выделить всё

[img]img/cat.png[/img]

CSS

Код: Выделить всё

body {
margin: 0;
background-color: #FFFBF3;
font-family: 'Inter', sans-serif;
}

.wrapper {
margin: 2em;
}

.hero {
margin-top: 6.5em;
}

.cat {
position: relative;
height: 450px;

img {
position: absolute;
left: 50%;
top: 50%;

height: 247px;

transform: translate(-36%, -35%);
}

.inner-circle, .outer-circle {
position: absolute;
left: 50%;
top: 50%;

border-radius: 50%;
}

.inner-circle {
z-index: -1;

width: 305px;
height: 305px;

background-color: #FFEBC3;

transform: translate(-50%, -40%);
}

.outer-circle {
z-index: -2;

width: 573px;
height: 573px;

background-color: white;

transform: translate(-50%, -50%);
}
}

Я пытался поместить overflow-x: Hidden; в .cat,

Код: Выделить всё

.cat {
position: relative;
height: 450px;
overflow-x: hidden;
/* ... */
}

И в .wrapper

Код: Выделить всё

.wrapper {
margin: 2em;
overflow-x: hidden;
}

Однако белый элемент div .outer-circle обрезается по краю .wrapper.
Единственный Я решил поместить overflow-x: Hidden; в тег body, однако я считаю, что это плохая практика (?). Хочу заняться конкретной проблемой, хотелось ее скрыть.
Есть ли другой способ?

Подробнее здесь: https://stackoverflow.com/questions/781 ... -of-parent