How can I align my images with the text? - html

Question

I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.
I should also be able to "paint" the image background green, but have no idea how to do so.
How can I achieve that?
body {
background-color: #dff0d8;
}
h1 {
background-color: green;
}
#outros {
background-color: black;
}
#texto1 {
float: left;
width: 30%;
}
#texto2 {
float: left;
width: 30%;
}
#texto3 {
float: left;
width: 30%;
}
img {
border-radius: 10%;
}
#preto {
background-color: green;
}
<link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<h2 id="outros">
<font color="white">
<div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font>
</h2>
<h1>
<font color="white"> A cidade de Lisboa </font>
</h1>
<div id="texto1">
<h3> Introdução </h3>
<p>
Lisboa GCTE é a capital de Portugal e a cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa
área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital
mais a ocidente do continente europeu na costa atlântica.
</p>
</div>
<div id="texto2">
<h3> Globalidade </h3>
<p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente
favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de
ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital.
<br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade
com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona.
</p>
</div>
<div id="texto3">
<h3> Riqueza </h3>
<p>
A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões
de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo.
</br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais.
</p>
</div>
<div id="zonafoto">
<div id="img1" style="float:left">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div>
<div id="img2" style="float:center">
<img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div>
<div id="img3" style="float:right">
<img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div>
</div>

Answer 1

For the menu try this:
HTML:
<div id="outros">
<ul>
<li id="preto"><h2>Home</h2></li>
<li><h2>Museus</h2></li>
<li><h2>Monumentos</h2></li>
<li><h2>Restaurantes</h2></li>
</ul>
</div>
CSS:
#outros {
background-color: black;
color: white;
margin-left: -40px;
}
#outros li {
display: inline-block;
padding: 5px 20px;
}