Esse é meu código em html fiz algumas coisas diferentes pq quero aprender e fazer do meu jeito ao msm tempo entt ignore algumas coisa se tiverem diferentes ambas imgs tbm são 250px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Produtos - Amaro's Iluminação </title>
<link rel = "stylesheet" href = "reset.css">
<link rel = "stylesheet" href = "produtos.css">
</head>
<body>
<header>
<h1><img class =" logo" src="logo"></h1>
<nav>
<ul>
<li> <a href = "index.html"> Página Inicial </a> </li>
<li> <a href = "produtos.html"> Produtos </a> </li>
<li> <a href = "contato.html"> Contato </a> </li>
</ul>
</nav>
</header>
<main>
<ul class = " linha " >
<li>
<h2> Luminária </h2>
<img src = " luminaria.jpg ">
<p>
Informação adicional
Cor: Rosa
Garantia: 90 dias (contra defeitos de fabricação)
</p>
<p> R$ 112,90 </p>
</li>
<li>
<h2> Refletor Roya 200w 6500K </h2>
<img src = " refletor.jpg ">
<p>
Informações adicionais
Potência: 200w
Fluxo luminoso: 18000lm
</p>
<p> R$ 174,40 </p>
</li>
<li>
<h2> chave</h2>
<img src = " chave.jpg">
<p>
Características:
Cor: Cinza
Potência: 25W
<p> R$ 99,90 </p>
</li>
</ul>
</main>
</body>
</html>esse é meu código em css
header {
background: #F0E68C;
padding: 80px 0;
}
.logo {
width: 20%;
height: 250px;
margin-left: 300px;
margin-top: 20px;
}
nav {
position: absolute;
top: 210px;
right: 300px;
}
nav li {
display: inline;
margin-left: 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
}
.linha li {
display: inline-block;
}
