Além dessa dúvida da largura da imagem, também não estou conseguindo colocar a legenda figcaption, fazer com que ela fique dentro da imagem.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Além dessa dúvida da largura da imagem, também não estou conseguindo colocar a legenda figcaption, fazer com que ela fique dentro da imagem.
Oi Vinicius, tudo certo?
O instrutor colocou 45% de width pois ele quis que ficasse QUASE com a metade do elemento pai (.portfolio). Os 10% restantes é para dar uma margem entre eles.
Com relação a sua outra dúvida, confira se os elementos estão sendo abertos e fechados corretamente. A estrutura de cada <li> deve ser feita desta maneira:
<li>
<a href="http://g1.com.br">
<figure>
<img src="img/g1.png" alt="Front-page do portal G1">
<figcaption>
G1.com.br: reformulação de design e
implementação de HTML, CSS e JavaScript
</figcaption>
</figure>
</a>
</li>Abcs!
Meu código html está assim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/site.css"/>
<link rel="stylesheet" href="portfolio.css"/>
</head>
<body>
<main>
<div>
<h1>Portfolio</h1>
<p>Veja abaixo a lista dos meus projetos mais relevantes</p>
<ul class="portfolio">
<li>
<figure>
<img src="../portfolio/bmw.png" alt="Foto BMW"/>
<figcaption>
<a href="http://www.bmw.com.br">BMW.com: reformação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../portfolio/g1.png" alt="Foto G1"/>
</figure>
<figcaption>
<a href="http://www.uol.com.br">UOL.com.br: reformação de design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</li>
<li>
<figure>
<img src="../portfolio/ibm.png" alt="Foto IBM"/>
</figure>
<figcaption>
<a href="http://www.ibm.com.br">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
</figcaption>
</li>
<li>
<figure>
<img src="../portfolio/uol.png" alt="Foto Uol"/>
</figure>
<figcaption>
<a href="htto://www.g1.com.br">G1.com.br: reformulação do design e implementação de HTML, CSS e JavaScript</a>
</figcaption>
</li>
</ul>
</div>
</main>
</body>
</html>Vinicius,
Repare onde você está colocando o link (a href).
O usuário precisa clicar só no texto ou na figure toda? Na figure toda! Então você precisa envolvê-la toda no link, não só o texto, como no código que coloquei no post anterior.
Qualquer dúvida só postar, ok?
Abcs e bons estudos!