Positioning images using the margin

Sorry for the dumb question, I am totally new to HTML/CSS and need some help.

1 - I am trying to position my 2 image boxes next to each other, I can't seen to move the purple box up as when I add margin it does not recognise.

2- Neither the lime image or purple image recognises when I add margin-top. How can I move these both up or down?

Link -

Thanks in advance.

div class="image">
  <img src="WEBSITE_PRODUCTS_SMARTWESTERN.jpg"

  img.resize
  max width="50%"
  max height="50%"
  align="right"
  margin="top"