I have tried with measurements in px, in percentages, finally I am studying it with Flex and it seemed to work but when I resize the browser window, the central one that corresponds to the web app development text changes size and I don't want it. If I use the height and width properties in percentage, it won't let me set the size I want or it overflows because it requires greater than 100% and if I put it in px, when I change the size of the window it also overflows.
In the following way it fits but not with the sizes that I want
.cabecera{
width: 91rem;
display: flex;
padding: 20px;
align-items: center;
justify-content: space-between;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
}
#cabeza{
width: 40%;
align-content: stretch;
text-align: center;
border-radius: 20px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
background-color: gray
}
#cabezatxt{
text-shadow: 2px 2px #000000;
text-decoration: overline;
text-decoration-style: solid;
font-style: italic;
font-family: sans-serif;
color: white;
height:100%;
width: 100%;
flex-grow:0;
}
#imagenbn{
width: 30%;
align-content: stretch;
border-radius: 20px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
}
#foto{
height:100%;
width: 100%;
border-radius: 20px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
flex-grow: 10;
}
#logo{
width: 10%;
flex-grow: 0;
align-content: stretch;
border-radius: 20px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
}
#img1{
height:100%;
width: 100%;
border-radius: 20px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
flex-grow: 10;
}
@media screen and (max-width: 900px) { #cabeza h1{ font-size: 1rem; } }
nav{
height: 7rem;
width: 91rem;
}
.botones{
width: 100%;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
flex-shrink: 10;
background-color: gainsboro;
}
.botones button{
height: 3rem;
width: 7rem;
font-size: 1rem;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
border-radius: 20px;
margin: 1rem;
text-decoration-style: solid;
text-shadow: 2px 2px #000000;
font-style: italic;
font-family: sans-serif;
color: white;
background-color: gray;
}
button:hover{background-color: gainsboro}
button:active {
text-shadow:2px 2px #000000;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
@media screen and (max-width: 900px) { .botones{ font-size: 1rem; } }
#parati{
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);
border-radius: 20px;
margin-top: 2rem;;
z-index:1;
width: 150px;
height: 9rem;
}
.columna{
float: left;
height: 30rem;
border-radius: 20px;
background-color: gainsboro;
text-align: center;
box-shadow: 15px 15px 15px 0 rgba(0, 0, 0, 0.5);
}
p{
font-family: monospace;
text-align: center;
font-size:1rem;
justify-content: center;
}
.bloque{
display: flex;
justify-content: space-around;
}
section{
display: flex;
justify-content: center;
justify-content: space-around;
height: 30rem;
width: 60%;
border-radius: 20px;
background-color: gainsboro;
box-shadow: 15px 15px 15px 0 rgba(0, 0, 0, 0.5);
}
.seccion{
text-align: center;
background-color:gainsboro;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
}
@media screen and (max-width: 900px) { .seccion{ font-size: 1rem; } }
<!DOCTYPE html>
<html>
<head>
<title>Desarrollo de app WEB</title>
<meta name="author" content=" "/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="miestilo.css"/>
</head>
<body>
<header>
<div class="cabecera">
<div id="logo">
<img id="img1" src="imagenes/daw.png"/>
</div>
<div id="cabeza">
<h1 id="cabezatxt">Desarrollo de app WEB</h1>
</div>
<div id="imagenbn">
<img id="foto" src="imagenes/imagenbn.jpeg"/>
</div>
</div>
</header><br><br>
<nav>
<div class="botones">
<div class="boton">
<button input type="button">Sobre mi</button>
</div>
<div class="boton">
<button input type="button">Contacto</button>
</div>
<div class="boton">
<button input type="button">Libros</button>
</div>
<div class="boton">
<button input type="button">Ejercicios</button>
</div>
</div>
</nav><br><br><br>
<div class="bloque">
<aside class="columna">
<figure>
<img id="parati" src="imagenes/parati.png"/>
</figure>
<header>
<h4>ESTO ES PARA TI</h4>
</header>
<p>Por que sé lo complicado <br>que puede ser comenzar<br>el camino <br>del <strong>desarrollo WEB</strong><br> y las horas que
puedes<br>llegar a invertir<br> en buscar por la red</p>
</aside>
<section>
<div class="seccion">
<div id="que">
<h1>QUE VAS A ENCONTRAR</h1>
</div>
<div id="sobremi">
<article>
<h3>Sobre mi</h3>
<ul>
<li>Grado Universitario Enfermería</li>
<li>Grado Superior DAW</li>
<li>Curriculum</li>
</ul>
</article>
</div>
<div id="contenidos">
<article >
<h3>Contenidos</h3>
<ul>
<li>Ejercicios de programación</li>
<li>Bibliografía</li>
<li>Enlaces de interés</li>
<li>Videos Tutoriales</li>
</ul>
</article>
</div>
</div>
</section>
</div>
</body>
</html>
You have several errors that are normal when you are learning, I advise you to read the HTML and CSS manual carefully on how to use HTML tags.
For your block to be adopted automatically you can use for example:
Now, if you search for information on the internet they advise to use rem , em and not pixels , it is important to know that according to the specifications, the PX unit of CSS is not equivalent to a physical display pixel.
If we put in our body (body):
Possible example:
EDIT:
Ahora veamos un ejemplo usando Grid, si te quieres modernizar usaría esta estructura.
Aquí una guía de cómo usar GRID
Ejemplo grid: