É o seguinte, os meus 3 cards não estão ficando 100% de largura após abaixar para 720px, junto com os cards o texto que defini no css acabava ultrapassando os limites da tela reponsive. Segui o que ela foi desenvolvendo, porém no meu não ficava 100% reponsivo na tela mobile. Segue o codigo do HTML e CSS para me ajudarem, porque devo estar errando algum classe ou esqueci de adicionar um tag no css há mais.
<body>
<header>
<h1 class="logo">Rafael Lima Silva</h1>
<nav class="cabecalho-nav">
<ul class="cabecalho-lista">
<li> <a href="/">Home</a></li>
<li> <a href="/persona">Persona</a></li>
<li> <a href="/habilidades">Habilidades</a></li>
</ul>
</nav>
<div class="cabecalho-final">
<a href="/contatos">Contatos</a>
</div>
</header>
<main>
<section class="conteudo-home">
<img src="./Imagens/persona.jpg" alt="sou um homem de frente na tela">
<div><h2 class="home-titulo">Rafael Lima Silva</h2>
<p>Sou um design, apaixonado pelo arte e visual, com especialização de user experiencia!!!</p>
</div>
</section>
<section class="conteudo-persona">
<h2>A jornada de uma pessoa.</h2>
<p>A tecnologia é a linguagem do futuro. Ela é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p>
<p>Duwy é um site de portfólio pessoal elegante e profissional, projetado para criativos, freelancers e profissionais que desejam se destacar.</p>
<p>Gosto de mostrar o meu talento, as pessoas olham o que faço, construa sua marca e impressione o mundo!</p>
</section>
<section class="conteudo-habilidades">
<ul class="lista-habilidade">
<li> <img src="./Imagens/computador de mesa.jpg" alt="computador de mesa">
<div><h3>Aqui está a minha habilidades.</h3>
<p>A tecnologia é a linguagem do futuro. Ela é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p</div>
</li>
<li><img src="./Imagens/web-imagem-Londres.jpg" alt="imagem de Londres">
<div><h3>Sou formado em TI</h3>
<p>Uso a tecnologia porque é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p></div>
</li>
<li><img src="./Imagens/web-site mesa.jpg" alt="computador de mesa">
<div><h3>Sou formado em TI</h3>
<p>Uso a tecnologia porque é importante em nossas vidas, por isso que sou entusiasta com a tecnologia</p></div>
</li>
</ul>
</section>
</main>
</body>
body { font-family: var(--fonte-principal); font-size: 20px; margin: 1em}
.logo {padding: 1em;text-align: center;}
h3 {font-size: 26px;}
h2, p {font-size: 32px;padding: 1em;}
.conteudo-home img {width: 100%;}
.conteudo-habilidades{width: 100%;}
.conteudo-habilidades ul li img {width: 100%;}
.conteudo-persona {text-align: center; padding: 2em;}
.home-titulo {text-align: center; padding: 1em;}
.cabecalho-lista, .cabecalho-final {
display: none;
}
.lista-habilidade {
display: grid;
grid-template-columns: repeat(12, 1fr);
list-style: none;
gap: 1em;
}
.lista-habilidade ul li {
grid-column: span 12;
}
@media screen and (min-width: 720px) {
.conteudo-home img {
width: 100%;
}
.cabecalho-nav {
display: flex;
justify-content: center;
padding: 1rem 2rem;
}
.cabecalho-lista {
display: flex;
gap: 2rem;
list-style: none;
flex: 2;
}
.cabecalho-lista li a{
text-decoration: none;
}
.logo {
flex: 1;
margin-left: 1rem;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
}
.cabecalho-final {
flex: 1;
display: flex;
justify-content: flex-end;
}
.cabecalho-final a {
text-decoration: none;
margin-right: 2rem; /* empurra o item para longe do menu */
}
.conteudo-home {
display: flex;
justify-content: space-between;
align-items: center;
}
.conteudo-home img {
width: 500px;
height: 700px;
object-fit: cover;
}
.lista-habilidade li:nth-child(1){
grid-column: 2 / span 3;
}
.lista-habilidade li:nth-child(2) {
grid-column: 5 / span 4;
}
.lista-habilidade li:nth-child(3) {
grid-column: 9 / span 3;
}
.lista-habilidade li img {
width: 300px;
object-fit: cover;
}
}