I want my two images to be side by side so I used a list to inline them next to one and other, although I am unsure on how to move these images to the middle of the page while maintaining them to be side by side! Also should I be using a list or a div to get my images side by side?

[How my website looks currently](https://i.stack.imgur.com/XDW2N.png)

**HTML** 

```
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Jacques Andre</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="banner">
        <ul class="nav">
        <li><a href="##">Gallery</a></li>
        <li><a href="###">About</a></li>
        </ul>
        <div class="mainlogo">Jacques André</div>
</div>

    <h1 id="favs">some of my favorites</h1>
        <ul class="images">
        <li><img id="paris" src="img/paris.jpeg" alt="paris"></li>
        <li><img id="naturalframe" src="img/naturalframe.JPG" alt="natural frame"></li>
        </ul> 
</body>
</html>

```

**CSS**

```
body{
    background-color: #ffffff;
    padding:0;
    margin: 0 0 0 0;
    font-family: montserrat;
#favs{
    font-size: 30px;
    text-align: center;
    text-transform: capitalize;
    padding-top: 50px;
}
.images{
    list-style: none;
    padding-top: 30px;
}
.images > li{
    display: inline-block;
}
#paris{
    width: 300px;
    height: 533.3px;
}
#naturalframe{
    width: 300px;
    height: 533.3px;
}

```

[Mock up of how I want it to look like](https://i.stack.imgur.com/vLHHn.png)