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
<!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 id = "produtos">
<li>
<h2> Spot redondo 5w 4000K </h2>
<img class = " spot " src = " spot.jpg ">
<p>
Informação adicional
Cor: Branca
Dimensões do produto: 9cm de diâmetro
Tipo de Soquete: Led
Quantidade de Lâmpadas Necessárias: 1
Lâmpadas Apropriadas: Led
Potência Máxima por Lâmpada: 5W
Acompanha Lâmpada: Sim
Possui LED Integrado: Sim
Material: Polipropileno e Led
Necessita Montagem: Não
Uso: Teto
Tensão: Bivolt
Garantia: 90 dias (contra defeitos de fabricação)
</p>
<p> R$ 112,90 </p>
</li>
<li>
<h2> Refletor Roya 200w 6500K </h2>
<img class = " spot "src = " refletor.jpg ">
<p>
Informações adicionais
Potência: 200w
Fluxo luminoso: 18000lm
Tensão nominal: AC90-265V
Fator de potência: >0.6
Frequência nominal: 50/60hz
Vida útil: (L70) 30.000h
Índice de proteção: IP66
Peso da lâmpada: 2.28KG
Dimensões: 305x280x34 (mm)
IRC: _>80
</p>
<p> R$ 174,40 </p>
</li>
<li>
<h2> Ring Light 28cm </h2>
<img class = " spot " src = " ring.jpg">
<p>
Características:
Cor: Preto
Diâmetro externo: 26 cm / Diâmetro interno: 20cm
Potência: 25W
Voltagem: 110V-260V
USB:cabo de alimentação comprimento 200 centímetros
Material: liga de alumínio/ABS
Fonte de luz: LED SMD
Forma: Anel
</p>
<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;
}
}
#produtos li {
display: inline;
}
.spot {
width: 20%;
height: 350px;
}o problema que estou tendo é q as imagens não ficam na msm linha ou uma do lado da outra ( as imgs são diferentes da do professor porém fiz uma classe para deixar elas todas do msm tamanho para não haver confronto umas com as outras na hora de colocar na msm linha) me ajuda por favor eu imploro kkkkkkkkk
