How to align divs to the right - html

Question

I have a cityHeader(in this pic it is Los Angeles).
Underneath cityHeader there is div called weatherMain which contains three smaller divs(id=temperature,id=weatherDescriptionHeader and id=documentIconImg
#cityHeader {
float: right;
display: block;
margin: 5px;
font-size: 42px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
}
#weatherMain div {
display: inline-block;
}
#weatherDescriptionHeader {
font-size: 28px;
vertical-align: 50%;
}
#temperature {
font-size: 38px;
vertical-align: 25%;
}
<h1 id="cityHeader"></h1>
<div id="weatherMain">
<div id="temperature"></div>
<div id="weatherDescriptionHeader"></div>
<div><img id="documentIconImg" /></div>
</div>
enter image description heredocumentIconImg).
Three smaller divs should be under cityHeader, positioned next to each other and all aligned to the right.
I tried floating them to the right,adding text-align:right to their parent element(weatherMain), nothing works.
In the pic temperature div is 9 degrees,weatherDescriptionHeader is Clear sky and documentIconImg is icon.

Answer 1

Is this what you're looking for: https://codepen.io/dillonbrannick/pen/XOoNjp
I added in the background colours just so it's easy to identify the elements. Just put your background image into the #weatherMain and remove the other background colours and it should work fine. I added in a margin to #weathermain just to display it within the middle of the page.
Also I added a margin:0 to the h1 tag as h1 automatically adds some css style to it that was interfering.
HTML:
<div id="weatherMain">
<h1 id="cityHeader">Hello World</h1>
<div id="temperature">Howya</div>
<div id="weatherDescriptionHeader">Hola</div>
</div>
CSS:
#weatherMain {
background-color:red;
text-align: right;
margin: 10% 20% 10% 20%
}
#cityHeader {
background-color:yellow;
}
h1{
margin:0;
font-size:45px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#temperature {
background-color:green;
font-size: 38px;
}
#weatherDescriptionHeader {
background-color:lightblue;
font-size: 28px;
}

Answer 2

Try this:
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
float: right
}