Совместите содержимое симметрично с остальной частью страницы

Question

Я пытаюсь центрировать галерею изображений на фоне списков симметрично. Независимо от размера браузера. Какими способами я могу симметрично выровнять контент

Я попытался установить обертку вокруг списка и галереи и установить фиксированную ширину, но это только меняет размер моего изображения, а не размер фона списка. Я также пытался иметь поплавок, но он меняется во всем.

.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/

Я включил jsfiddle кода, чтобы все было аккуратно.

https://imgur.com/a/PnIzxnp Это то, чего я хотел достичь https://imgur.com/a/dDt27UE но это то, что я получаю, и это выглядит неправильно, вредит моему ОКР.

Answer 1

Вы можете сделать это:

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> 

ДЕМО ЗДЕСЬ