Estou iniciando a aprendizagem , mas tive algumas dúvidas. Gostaria deixar 2 imagens(imagem1,imagem2) de tamanhos diferente: juntas, no topo da página, uma ao lado da outra(sendo a largura da primeira imagem 20% da largura da página , e da segunda imagem vai até o fim da tela esticando bastante).
Não consigo de jeito nenhum configurar tamanho das imagens pelo CSS,A segunda imagem a altura é maior, se eu diminuo o tamanho pelo CSS ,os textos que estão la embaixo sobe junto e sobrepõe na imagem.
Pelo arquivo html deu certo usando o width e height direto na , mas acredito que essa parte,o jeito certo seja tudo pelo CSS.
Não sei se estou digitando alguma coisa errada, como falei, estou iniciando. Se alguém conseguir me ajudar estarei bem grato
<!DOCTYPE html>
<html>
<head>
<title> Html e Css </title>
<meta charset="utf-8">
<meta name="description" content="ajuda nas configurações">
<meta name="keywords" content="html,css">
<meta name="viewport" conect="width=device-width, initial-scale=1.0">
<link rel="stylesheet" text="text/css" href="configuração.css">
</head>
<body>
<header>
<div id="imagenstopo">
<div id="imagem1">
<img src="imagem1.png" alt="descrição imagem1"/>
</div>
<div id="imagem2">
<img src="imagem2.jpg" alt="descrição imagem2"/>
</div>
</div>
<nav id="navegação">
<ul style="list-style-type:none">
<li><a href="primeirapagina.html">Página Principal</a></li>
<li><a href="segundapagina.html">Acessórios</a></li>
<li><a href="terceirapagina.html">Outros</a></li>
<li><a href="quartapagina.html">Contato</a></li>
</ul>
</nav>
</header>
<main>
<p>TEXTO QUALQUER</p>
<img src="ranking1.jpg" alt="foto do ranking 1"/>
<br>
<img src="ranking2.jpg" alt="foto do ranking2"/>
<br>
<img src="ranking3.jpg" alt="foto do ranking3"/>
<p>TEXTO QUALQUER 2 </p>
</main>
</body>
</html>
