Контент скрыт в определенной ширине мобильного устройства ⇐ CSS

[Anonymous]

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












Responsive layouts don’t have to be a struggle
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
I WANT TO LEARN






heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.

heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.

heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.

heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.

heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.

heading
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.






@inc 2012 created by ambrish





и CSS
*{
box-sizing: border-box;
margin:0;
padding: 0;
}

html{
font-size:10px;
scroll-behavior: smooth;
}

body{
margin:0;
padding: 0;
font-family: "Roboto", sans-serif;

}

.header{
/* padding:14.6rem 4.5rem; */
height:100vh;
/* padding:12rem 0; */
/* min-width:100%; */
background-color: #23424A;
color: white;
/* padding-top: 150px; */
display: flex;
flex-direction: column;
justify-content: center;
}

header>section{
max-width:min(65%,100%);
margin:0 7rem;
}

header>section>h1{
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: normal;
font-size:clamp(2.5em,3.8vw,12.5em);
/* font-size:8vmin; */
margin-top:14px;
padding:1rem 0 0 0;

}

header>section >p{
font-family: "Roboto", sans-serif;
font-weight:380;
font-style: normal;
max-width:90%;
font-size:clamp(1.2em,2vw,10em);
margin:14px 0 14px 0;
padding:1rem 0 1rem 0;

}

button{
padding:1em 3.7em;
border-radius: 50px;
border: none;
background-color: #38CFD9;
font-family: "Roboto", sans-serif;
font-weight:700;
font-size:clamp(.5em,1vw,3.5em);
color:#132327;

}

main{
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}

main > section{
padding:2rem 0;
width:80%;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:2rem;
}
main > section > div{
background:#578a9621;
color:#23424A;
/* max-width: ; */
padding:1rem;
margin:1rem;
border-radius: 1em;
}

main > section > div > h3{

font-size:clamp(2em,2vw,5em);
padding: .2em;
}

main > section > div > p{

font-size:clamp(.5em,1.3vw,5em);
padding: .2em;

}

@media(max-width:800px){

.header, main{
padding:2.5rem 0;
height:auto;
}
main > section{
display: block;
}
}

footer{
max-width:100%;
background-color: #325d67d8;
min-height:10em;
display: flex;
align-items: center;
justify-content: center;
color: white;
}

footer p{
font-size:clamp(.8em,1.5vw,3.5em);

}



Подробнее здесь: https://stackoverflow.com/questions/786 ... bile-width