Stack Exchange
¿Cómo mantener un texto en su div?
Estoy realizando un curso de inicio al desarrollo web; para el proyecto final nos dieron imágenes y una base para crear una página que tenga diseño responsive. Todo perfecto hasta el momento de reducir la pantalla, un texto se me coloca en todo el centro de la pantalla.
Adjunto imágenes para mayor comodidad.
Al momento de reducir la pantalla; se ve así:
¿Cómo puedo lograr que se quede en su lugar? Adjunto html y css.


@charset "utf-8";
/* CSS Document */
*{
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{
    background-color: rgb(33, 29, 29);
    font-size: 18px;
}
p{
    font-size: 16px;
    line-height: 1.5em;
}
/*header y menú*/
div.bloqueinicial{
    background-image: url("../Imágenes/Fondo1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
img.primeraimagen{
    width: 100%;
}
div.logo{
    top: 20px;
    left: 25px;
    height: 20px;
    position: absolute;
}
.menulanzador{
    top: 20px;
    text-decoration: none;
    color: white;
    position: absolute;
    left: 80%;
    padding: 6px 10px;
    background-color: #5E4422;
    border-radius: 3px;
    border-style: solid;
}
div.navegacion{
    top: 48px;
    right: 40px;
    position:absolute;
    font-size: 14px;
}
.navi {
    padding-left: 10px;
    display: inline-block;
}
.navegacion a{
    color: #f5f0ed;
    text-decoration: none;
    font-weight: 800;
}
a:hover{
    background-color: #d03b40;
    border-radius: 3px;
    padding: 5px;
    color: whitesmoke;
}
/*primerfondo*/
div.primero{
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
float:none; 
}
div.recienhecho{
    top: 40%;
    left:50%;
    position:absolute;
    transform: translate(-50%, -50%);
    color:#f5f0ed;
    font-size: 44px;
    font-weight: bolder;
    text-align: center;
}
div.parrafo1{
    position: absolute;
    width: 90px;
    border:#f5f0ed 1px solid;
    left: 49.5%;
    transform: translate(-50%, -50%);
    top: 52%;
    height: auto;
}
div.primerparrafo{
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    color: #f5f0ed;
    text-align:center;
}
/*segundobloque*/
div.fondorojo{
    height: 510px;
    width: 50%;
    float:left;
    background-color: #d03b40;
    text-align: center;
    padding-top: 200px;
    padding-left: 40px;
    padding-right: 30px;
    color: #f5f0ed;
    display: inline-block;
}
h3.titulos{
    font-weight: 800;
    font-size: 28px;
}
div.fondoblanco{
    height: 510px;
    width: 50%;
    float:right;
    background-color: #B1B1AD;
    text-align: center;
    padding-top: 200px;
    padding-left: 40px;
    padding-right: 30px;
    color: #d03b40;
    display: inline-block;
}
/*tercerbloque*/
div.segundo{
    text-align: center;
    color: #f5f0ed;
    background-image: url("../Imágenes/Fondo2.jpg");
    background-size: cover;
    width: 100%;
    position: relative;
    display: inline-block;
}
.titulodesayuno{
    position: absolute;
    top: 30%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: 44px;
    font-weight: bolder;
}
.lineasegundobloque{
    position: absolute;
    width: 90px;
    border:#f5f0ed 1px solid;
    left: 49.5%;
    transform: translate(-50%, -50%);
    top: 39%;
}
.p2{
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    font-size: 16px;
}
.descubreboton{
    position: absolute;
    transform: translate(-50%, -50%);
    width: auto;
    top:67%;
    left:50%;
}
.descubre{
    border: 4px solid white;
    background-color: transparent;
    padding: 1em;
    width: fit-content;
    font-weight: 500;
    font-size: 16px;
    color:#f5f0ed;
}
img.segundaimagen{
    width: 100%;
}
/*cuarto bloque, íconos*/
.iconos{
    background-color:beige;
    padding: 2rem;
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    min height: fit-content;
    text-align: center;
}
div.pan{
    text-align: center;
    height: fit-content;
    color: #3c3c3b;
    padding: 4rem 1rem 4rem 1rem;
}
span.imagenpan{
    float: left;
    margin-right: 1em;
}
div.textoprimerpan{
    text-align: left;
}
h3.tituloiconos{
    font-weight: 800;
    font-size: 24px;
    text-align: left;
    margin-bottom: 8px;
}
p.textoiconopan{
    line-height: 1.5rem;
    overflow: hidden;
}
div.pie{
    text-align: center;
    height: fit-content;
    color: #3c3c3b;
    padding: 4rem 1rem 4rem 1rem;
}
span.imagenpie{
    float: left;
    margin-right: 1em;
}
div.textosegundopie{
    text-align: left;
}
div.muffin{
    text-align: center;
    height: fit-content;
    color: #3c3c3b;
    padding: 4rem 1rem 4rem 1rem;   
}
span.imagenmuffin{
    float: left;
    margin-right:1em;
}
div.textoterceromuffin{
    text-align: left;
}
div.trigo{
    text-align: center;
    height: fit-content;
    color: #3c3c3b;
    padding: 4rem 1rem 4rem 1rem;   
}
span.imagentrigo{
    float:left;
    margin-right:1em;
}
div.cuaretotextotrigo{
    text-align:left;
}
/*última sección, contacto y ubicación*/
div.contactarojo{
    height: 510px;
    width: 50%;
    float:left;
    background-color: #DED6BF;
    text-align: center;
    padding-top: 200px;
    padding-left: 40px;
    padding-right: 30px;
    color: #d03b40;
    display: inline-block;
}
div.ubicacionblanco{
    height: 510px;
    width: 50%;
    float:right;
    background-color: #d03b40;
    text-align: center;
    padding-top: 200px;
    padding-left: 40px;
    padding-right: 30px;
    color: #f5f0ed;
    display: inline-block;
}
footer.final{
    display: table;
    height: 25vh;
    background-color: rgba(25,19,19,1.00);
    width: 100%;
    color:white;
    font-size: 16px;
    padding-left: 20px;
    align-items: center;
    text-align: left;
}
h4.textofinal{
    display:table-cell;
    vertical-align: middle;
}/*responsive y menú*/
/*menú*/
@media screen and (max-width: 900px){
    .navegacion{
        display:none;
    }
}
@media screen and (min-width: 901px){
    .menulanzador{
        display:none;
    }
}
/*primerasección*/
@media screen and (max-width:901px){
    div.{
        width:100%;
    }
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Café Oslo</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,800;1,800&display=swap" rel="stylesheet">
</head>
<body>
<!----Primera sección, menú---->
    <div class="bloqueinicial">
        <img class="primeraimagen" src="../Imágenes/Fondo1.jpg" alt="moffins horneados">
    <div class="header">
        <div class="logo">
        <img class="logotipo" src="../Imágenes/Logo.png" alt="cafelogo">
        </div>
        <a href="#menu" class="menulanzador">Menú</a>
    <div class="navegacion">
        <ul>
        <li class="navi"><a href="#">EL ESPACIO</a></li>
        <li class="navi"><a href="#">PRODUCTOS</a></li>
        <li class="navi"><a href="#">OFERTAS</a></li>
        <li class="navi"><a href="#">RESERVAS</a></li>
        <li class="navi"><a href="#">CONTACTO</a></li>
        </ul>
    </div>
    </div>
<!----Segunda sección, productos---->
    <main>
    <div class="primero">
        <div class="recienhecho">
            <h1 class="inicialhecho">RECIÉN HECHO,<br>TODOS LOS DÍAS</h1>
        </div>
    <div class="parrafo1"></div>
    <div class="primerparrafo">
        <p class="p1">
        Chocolate cake chocolate cake pie candy canes chocolate cake bonbon.
        I love marzipan liquorice I love cake chupa chups.
        Pie danish macaroon ice cream. Bonbon sweet bonbon jelly beans jelly-o I love lollipop.
        </p>
    </div>
    </div>

    </main>
    </div>
<!----Tercera sección, promociones---->
    <div class="promo">
    <div class="fondorojo">
        <h3 class="titulos">VEN AL BRUNCH DE<br>LOS DOMINGOS</h3>
            <br>
                <p>
                    Sesame snaps icing chocolate bar. I love donut powder sesame snaps.
                    Jelly-o topping caramels. Sugar plum I love gummi bears.
                </p>
    </div>
    <div class="fondoblanco">
        <h3 class="titulos">CELEBRA TUS FIESTAS<br>CON NOSOTROS</h3>
            <br>
                <p>
                    Bonbon sweet bonbon jelly beans jelly-o I love lollipop.
                    Cookie sesame snaps bear claw. Cake dragée danish.
                </p>
    </div>
    </div>
<!----Cuarta sección, productos---->
    <div class="segundo">
        <img class="segundaimagen" src="../Imágenes/Fondo2.jpg" alt="cerealfresas">
            <h2 class="titulodesayuno">VEN A DESAYUNAR</h2>
        <div class="lineasegundobloque"></div>
        <p class="p2">
            Bonbon topping I love sweet roll I love candy icing chocolate jelly.
            Pie soufflé sweet. Apple pie bonbon caramels powder.
        </p>
        <br>
    <div class="descubreboton">
        <button class="descubre">
        DESCUBRE NUESTROS PRODUCTOS
        </button>
    </div>
    </div>
<!----Quinta sección, íconos---->
    <div class="iconos">
    <div class="pan">
        <span class="imagenpan"> 
            <img src="../Imágenes/Icono1.png" alt="iconoprimerpan">
        </span>
        <div class="textoprimerpan">
            <h3 class="tituloiconos">PAN RECIÉN HECHO</h3>
                <p class="textoiconopan">
                    Cupcake danish I love halvah bonbon icing donut. Sweet caramels gingerbread bear claw jujubes
                    chocolate cake pudding sesame snaps bonbon. Chocalte cake wafer pudding muffin wafer sweet
                    roll I love chupa chups. Apple pie jujubes ice cream sugar plum topping.
                </p>
        </div>
    </div>
    <div class="pie">
        <span class="imagenpie">
            <img src="../Imágenes/Icono2.png" alt="iconosegundopie">
        </span>
        <div class="textosegundopie">
            <h3 class="tituloiconos">TARTAS PARA CADA DÍA</h3>
                <p class="textoiconopan">
                    Cookie cake jelly beans chocolate cake carrot cake croissant icing.
                    Caramels liquorice sesame snaps sugar plum I love bonbon. I love I love halvah.
                </p>
        </div>
    </div>
    <div class="muffin">
        <span class="imagenmuffin">
            <img src="../Imágenes/Icono3.png" alt="iconoterceropie">
        </span>
        <div class="textoterceromuffin">
            <h3 class="tituloiconos">PRUEBA NUESTROS DULCES</h3>
                <p class="textoiconopan">
                    Caramels liquorice sesame snaps sugar plum I love bonbon. I love I love halvah. I love marzipan Cake
                    I love donut tiramisu pudding cotton candy liquorice. Jelly beans chocolate brownie gummi bears dragée jelly-o
                </p>
        </div>
    </div>
    <div class="trigo">
        <span class="imagentrigo">
            <img src="../Imágenes/Icono4.png" alt="iconocuartotrigo">
        </span>
        <div class="cuaretotextotrigo">
            <h3 class="tituloiconos">INGREDIENTES ECOLÓGICOS</h3>
                <p class="textoiconopan">
                    Carrot cake fruitcake cheesecake muffin lollipop croissant dessert halvah. Cake pie bear claw marsh-mallow
                    marzipan cake. Carrot cake I love cotton candy ice cream chupa chups donut. Lemon drops
                    sweet marshmallow gummies I love dragée danish cake. Tart caramels sweet roll jelly-o liquorice tart.
                </p>
        </div>
    </div>
    </div>
<!----Sexta sección, fondos---->
<div class="cuadrozultimo">
    <div class="contactarojo">
        <h3 class="titulos">CONTACTA CON<br>NOSOTROS</h3>
        <br>
            <p>
                Si quieres hacer una reserva, tienes alguna sugerencia o
                simplemente quieres saludar, escribenos a: <a href="mailto:gonner765@gmail.com">gonner765@gmail.com</a>
            </p>
    </div>
    <div class="ubicacionblanco">
        <h3 class="titulos">¿SABES DÓNDE<br>ESTAMOS?</h3>
        <br>
        <p>
            C/MAYOR,15<br>00000 Barcelona<br>(Google Maps)
        </p>
    </div>
    </div>
<!----base---->
<footer class="final">
        <h4 class="textofinal">Septiembre 2015-2022 · Todos los derechos reservados</h4>
    </footer>
</body>
</html>



Aún no está terminado pues quiero ver en dónde he estado fallando.

No es parte de la solucion, pero tienes un error en el css en la linea 231 min height: fit-content; tienes que corregirlo por min-height: fit-content;

Para corregir un error, es necesario replantear toda la estructura del HTML porque está muy mal estructurado y desordenado. También falta corregir los estilos CSS

Esto no es un código reproducible, tienes muchos errores en tu estructura HTML, adjunta tu HTML completo para que podamos ayudarte.

Lo que pasa es que tienes una altura fija, lo que hace que no sea responsivo a la página, lo que debes hacer es poner:
min-height 

En vez de:
height

Con eso solucionas fácil ese problema, de hecho no recomiendo usar height nunca, a menos que sea necesario con una card que siempre quieras que sea del mismo tamaño.
