Question: I'm trying to align an image to the right inside of a div column.
As you can see it needs to be adjusted slightly to the right.

[![image](https://i.stack.imgur.com/FgXem.png)](https://i.stack.imgur.com/FgXem.png)

```
<div className="main-footer">
<div className="footer-container">
<div className="row">
   <div className="col">
       <h5>GitHub</h5>
       <Navbar.Brand href="https://github.com/">
       <img className="logo-position" src={githublogo} style={{ width: 
        100, height: 100 }} />
       </Navbar.Brand>
   </div>
</div>
</div>
</div>

```

```
.main-footer {
  color: white;
  background-color: #282c34;
  padding-top: 3em;
  padding-left: 3em;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;
}

```

I have tried adding some CSS in "logo-position" to fix it, but with no luck. From the answers that I found online I have tried:

```
position: absolute;
right: 38%;

```

```
text-align: right;

```

```
display: block;
margin-left: auto;
margin-right: auto;

```

Position absolute worked like I wanted it to in the beginning but as soon the window size would change it would move out of position.

I also tried adding `class="pull-right img-responsive"` into the img object, but it didn't seem to do anything.

EDIT: Solved. I simply added some margin to the image before importing it.

Answer: 
Something like this should work:

```
  .col{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:120px;
  }

```
.logo-position {
object-fit: contain;

```
object-position: center;

```

}