Есть код,не могу понять почему не получается отодвинуть popup__close на 10px От верха и от края, top:10px;right:10px; не работает?

Question

[Anterro]

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Popins', sans-serif;
list-style: none;
text-decoration: none;
}

.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #d2691e;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8%;
box-shadow: 0 5px 10px black;
}

.page {
height: 100vh;
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #808080;
}

.header__logo {
width: 200px;
height: 100px;
}

.header__logo {
transition: 0.5s;
}

.header__logo:hover {
transform: scale(1.2);
}

.search-form {
border: 2px solid rgba(16, 16, 16);
display: inline-flex;
justify-content: space-between;
height: 25px;
border-radius: 10px;
overflow: hidden;
}

.search-form__txt {
width: 160px;
border: none;
outline: none;
background-color: transparent;
}

.popup__content {
display: flex;
justify-content: end;
}

.popup__close {
width: 20px;
height: 20px;
background: transparent;
border: none;
color: #fffacd;
position: absolute;
padding: 0;
margin: 0;
cursor: pointer;
z-index: 10;
}

header nav ul li {
position: relative;
float: left;
}

header nav ul li a {
padding: 15px;
color: black;
font-size: 16px;
display: block;
}

header nav ul li a:hover {
background: #16101c;
color: #fffacd;
}

nav ul li ul {
position: absolute;
left: 0;
width: 180px;
background: #d2691e;
display: none;
}

nav ul li ul li {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li:hover > ul {
display: initial;
}

.wrapper {
width: 420px;
background: #fdeaa8;
color: #16101c;
border-radius: 10px;
padding: 30px 40px;
border: 2px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(20px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.wrapper h1 {
font-size: 36px;
text-align: center;
}

.wrapper .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 30px 0px;
}

.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 40px;
font-size: 16px;
padding: 20px 45px 20px 20px;
}

.input-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}

.wrapper .remember {
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0px 15px;
}

.remember label input {
accent-color: #fff;
margin-right: 3px;
}

.remember a {
color: black;
}

.remember a:hover {
color: #a52a2a;
text-decoration: underline;
}

.wrapper .btn {
width: 100%;
height: 45px;
border: none;
background: #cc7722;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
cursor: pointer;
font-size: 16px;
font-weight: 600;
}

.wrapper .register-link {
font-size: 14.5px;
text-align: center;
margin-top: 20px;
}

.register-link p a {
color: black;
font-weight: 600;
}

.register-link p a:hover {
color: #a52a2a;
}

Comments

[VoidVolker]

Anterro https://qna.habr.com/help/rules#3.8 и уберите лишние теги, не относящиеся к CSS.

[Ankhena]

Сейчас в вашем коде для popup__close вообще нет ничего, что могло бы его отодвигать.

Что сделать?
1. Уберите лишний код из вопроса.
2. Добавьте необходимую разметку. Потому что не зная родительских тегов бесполезно пытаться угадать где ошибка.
3. Уберите код в спойлеры. Предварительно обернув его в теги code, можно использовать кнопки редактора, оч удобно.
4. Сделайте песочницу с необходимым и достаточным для описания проблемы кодом на сервисах типа codepen.io, прикрепите ссылку к вопросу.

Потом позовите.

[Ankhena]

Я видела вашу песочницу из дубля вопроса.
Если в неё добавить top:10px; right:10px;, то всё прекрасно будет работать.