[HTML/CSS] Problema com posicionamento de imagem.

[Snbe 0]

Bom estou tentando aprender html e css no momento e como projeto final estava tentando criar uma especie de Pokedex de iniciais.
Porém estou tentando um problema pois uma imagem que deveria ficar ao lado do logo esta indo para o menu, alguém sabe o que eu fiz de errado?

		<div id="wrap">
			<header>
				<h1 id="h1"><img src="Imagens/pokedexlogo.png" alt="Logo da pokedéx" width="40%"></h2>
				<h2 id="h"><img src="Imagens/Circulo.png" alt="Circulo azul da pokedex"> </h2>
				<h2 id="h2"><img src="Imagens/bola verde pequena.png" alt="Circulo verde da pokedex" height="15px" width="15px"> </h2>
				<h2 id="h2"><img src="Imagens/bola vermelha pequena.png" alt="Circulo vermelha da pokedex" height="15px" width="15px"> </h2>
				<h2 id="h2"><img src="Imagens/bola amarela pequena.png" alt="Circulo amarela da pokedex" height="15px" width="15px"> </h2>
				<nav>
					<ul>
						<li> <a href="a">1ª Gen</a></li>
						<li> <a href="a">2ª Gen</a></li>
						<li> <a href="a">3ª Gen</a></li>
						<li> <a href="a">4ª Gen</a></li>
						<li> <a href="a">5ª Gen</a></li>
						<li> <a href="a">6ª Gen</a></li>
						<li> <a href="a">7ª Gen</a></li>
					</ul>
				</nav>
			</header>
			<div id="pkm1">
				<section>
					<h2>Charmander</h2>
					<p>Bulbasaur pode ser visto cochilando a luz do sól. Tem uma semente em suas costas. A semente em suas costas aumenta conforme ele absorve a luz do sól.</p>
					<p><img src="Imagens/Charmander.gif" alt="Imagem do Squirtle"></p>
				</section>
			</div>
			<div id="pkm2">
				<section>
					<h2>Squirtle</h2>
					<p>Bulbasaur pode ser visto cochilando a luz do sól. Tem uma semente em suas costas. A semente em suas costas aumenta conforme ele absorve a luz do sól.</p>
					<p><img src="Imagens/Squirtle.gif" alt="Imagem do Squirtle"></p>
				</section>
			</div>
			<div id="pkm3">
				<section>
					<h2>Bulbassaur</h2>
					<p>Bulbasaur pode ser visto cochilando a luz do sól. Tem uma semente em suas costas. A semente em suas costas aumenta conforme ele absorve a luz do sól.</p>
					<p><img src="Imagens/Bulbasaur.gif" alt="Imagem do Bulbassaur"></p>
				</section>
			</div>
		

body{
	font-family: Helvetica, sans-serif;
	font-family: 12px;
}
a:link, a:visited{
	color: #ff6600;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
#wrap{
	width: 960px;
	margin: auto;
	background-color: #DC0A2D;
	padding: 10px, 20px;
}
h1{
	float: left;
	display: block;
}
h2{
	float: right;
	padding: 4px;
	display: block;
}
#h{
	padding: 25px;	
	display: block;
}

header nav ul{
	list-style: none;
	padding-left: 2; 
}
header nav ul li{
	display: inline-block;
	margin-right: 10px;
}
header nav ul li a{
	font-size: 20px;
}
header nav ul li a:hover{
	text-decoration: underline;
}
#pkm1{
	display: block;
	width: 25%;
	height: 220px;
	float: left;
	border: 1px solid #000;
	padding: 10px;
	background: #e3e3e3;
}
#pkm2{
	display: block;
	width: 25%;
	height: 220px;
	float: left;
	border: 1px solid #000;
	padding: 10px;
	background: #e3e3e3;
}
#pkm3{
	display: block;
	width: 25%;
	height: 220px;
	float: left;
	border: 1px solid #000;
	padding: 10px;
	background: #e3e3e3;
}

[L. Henrique 179]

Faça o seguinte teste:

h2 {
   float: left;
   /* Ou */
   display: inline-block;
}

[Snbe 0]

 

Faça o seguinte teste:

h2 {
   float: left;
   /* Ou */
   display: inline-block;
}

Bom, não funcionou, mas obrigado.

Achei outro modo de resolver o problema

[viniciussvl 2]

 

      <h2 id="h2"><img src="Imagens/bola verde pequena.png" alt="Circulo verde da pokedex" height="15px" width="15px"> </h2>
        <h2 id="h2"><img src="Imagens/bola vermelha pequena.png" alt="Circulo vermelha da pokedex" height="15px" width="15px"> </h2>
        <h2 id="h2"><img src="Imagens/bola amarela pequena.png" alt="Circulo amarela da pokedex" height="15px" width="15px"> </h2>

[ustogo 1]

eu não usaria o mesmo nome de ID pra vários objetos.