Веб-сайт не отображает контент должным образом при настройке размеров ⇐ CSS

[Anonymous]

Я пытаюсь добавить точки останова на этот сайт, чтобы сделать его отзывчивым, но в элементах управления моего браузера, когда я перемещаю ширину окна, справа появляется пустое пространство. Я не понимаю, что вызывает эту проблему.
Я пытался исправить HTML и CSS, меняя различные элементы, но, похоже, ничего не помогает, и это происходит со всем сайтом.
это мои CSS и TSX для первого показанное изображения:

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

import home_img from "./images/home.png";
import googleLogo from "./images/google-logo.png";
import emailLogo from "./images/email-logo.png";

const Home = () => {
return (


[img]{home_img} /[/img]

Master New Languages Through News



[img]{googleLogo} /[/img]

Continue with Google






[img]{emailLogo} /[/img]

Continue with Email




);
};

export default Home;

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

body {
overflow-x: hidden;
}

/* Background homepage*/
.home {
position: relative;
max-width: 100vw;
min-height: 100vh;
background: linear-gradient(
to top,
rgba(255, 252, 252, 1) 0%,
rgba(96, 121, 255, 1) 100%
);
z-index: -2;
}

/* Image */
.img-home img {
position: absolute;
left: 29vw;
top: 70%;
transform: translateY(-50%);
width: 40%;
height: auto;
z-index: 1;
}

.master-new {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 31.125rem;
top: 11.875rem;
width: 57.25rem;
font-size: 3rem;
font-weight: 700;
color: rgba(0, 0, 0, 1);
}

/* Sign Up Buttons */
.google-button,
.email-button {
position: absolute;
width: 397px;
height: 70px;
left: calc(50% - 198.5px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.email-button {
top: 380px;
text-align: center;
}

.google-button {
top: 290px;
text-align: center;
}

.frame-google,
.frame-email {
position: relative;
width: 90%;
height: 90%;
top: 70%;
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
}

.frame-google {
background: #000061;
}

.frame-email {
background: #fffcfc;
}

.email-icon img,
.google-icon img {
width: 35px;
margin-right: 30px;
}

/* Sign Up text */
.email-text,
.google-text {
font-size: 20px;
font-weight: 500;
}

.email-text {
color: #000000;
}

.google-text {
color: #fff;
}

Подробнее здесь: https://stackoverflow.com/questions/785 ... dimensions