Align contents symmetrical with the rest of the page - html

Question

I'm trying to center an image gallery with a lists background symmetrically. No matter the size of the browser. What are some ways I can symmetrically align content
I tried setting a wrapper around the list and the gallery and setting a fixed width but it only changes my image size and not the list background size. I also tried having a float but it changes around everything.
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 44.4%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: 260px;
margin: 15px;
background-color: #ffffff;
}
.tourCities img {
width: 100%;
height: auto;
}
http://jsfiddle.net/xza7g439/
I have included a jsfiddle of the code to keep everything neat.
https://imgur.com/a/PnIzxnp This is what I wanted to achieve
https://imgur.com/a/dDt27UE but this is what I get and it doesn't look right hurts my OCD.

Answer 1

You can do this:
CSS
body {
background-color: #000;
box-sizing: border-box;
}
.wrapper{
display: inline-block;
width: 500px; //Set the size here what you want (px, %)
position: relative;
left: 50%;
transform: translateX(-50%);
}
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 100%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
margin:0;
padding:0;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: calc(50% - 8px);
background-color: #ffffff;
vertical-align: middle;
float: left;
margin: 16px 0px;
}
.cities .tourCities:nth-child(2n+0) {
margin-right:0;
margin-left: 16px; //pixel perfection
}
.tourCities img {
width: 100%;
height: auto;
}
.desc {
text-align: justify;
padding: 5px;
}
.date{
font-weight: 100;
color: #808080;
}
.smlBtn {
color: #ffffff;
background-color: #000000;
border-style: none;
padding: 14px;
}
HTML
<div class="wrapper">
<div class="months">
<ul>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="cities">
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
<div class="desc">
<p>
<b>New York</b>
</p>
<p class="date">Fri 27 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
<div class="desc">
<p>
<b>Paris</b>
</p>
<p class="date">Sat 28 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
<div class="desc">
<p>
<b>San Francisco</b>
</p>
<p class="date">Sun 29 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
</div>
</div>
DEMO HERE