so I'm currently working on my website... and well I ran into and issue when trying to add an image to the page. So I started off the home page by adding this -

```css
#titleOne, #paraOne, #paraTwo, #paraThree{
 text-align: center;
}
```

```html
<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="style.css">
  </head>
 <body> 
        <center>
  <h1 id="titleOne">Hello!</h1>
  <p id="paraOne">This is my first website!</p>

  <hr>

  <p id="paraTwo">Hopefully this isn't too boring :/ stay and you might like what you see in the future!</p>
  <p id="paraThree">Fact: I will not stop until I get it done.</p>

    </center>
 </body>
 </html>
```

This works good, everything is in the center and looks great! But now when I try to add an image and I put it in the center tags it adds into into the center. I don't want that... I want the image to go into the top right of the screen but with a couple % gap so it's not stuck on the side of the screen. I can't seem to achieve that because to do so I have to make the position: absolute; and when I do everything moves out of place. What would you guys recommend? Here is the image code.

```css
#img {
    /*position: absolute;*/
 width: 100px;
 height: 100px;
 border-radius: 100%;
 -webkit-animation: fadein 2s; 
}

@keyframes fadein {
 from { opacity: 0; }
 to { opacity: 1; }
}
```

```html
<img id="img" src="imgs/meFive.JPG" alt="My picture" >
```

Thanks!