How can I move images around in html or CSS?

As the title says I'd like to move around the images which are in the html file. I tried some options both in html and CSS to no avail. When I try to change the properties of a picture in CSS so I can lower it further down, nothing happens.

<html>
   <head>
      <link rel="stylesheet" href="css/style.css" />
      <style>
         img {
            float: right;
         }
         r1 {
            float:  center;
         }
      </style>
   </head>
   <body background="background.jpg">

    <img class="manonmoon" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\planet-violet-astronout.png" height="550"/>

      <img class="r1" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r1.png" height="110"/>

      <img class="r2" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r2.png" height="110"/>

      <img class="r3" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r3.png" height="110"/>

   </body>

</html>

and also for CSS:

.r2{

position:  relative;
left: 20px;

}

Solution 1:

add css class symbol when calling the ri class name

wrong r1

correct .r1