Как иметь две фотографии рядом?

Пожалуйста, проверьте этот код, надеюсь, он будет работать для вас. Максимальная высота изображения только для отображения изображения, как маленький размер.

.container{display: flex;display: -webkit-flex;justify-content: center;}
.container img { max-height: 150px;}

<div class="container">
    <img src="https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg" class="card_img" />
    <img src="https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg" class="card_img" />
  </div>

Мне не совсем понятен ваш вопрос. Но если вы имеете в виду div для выравнивания бок о бок. Вы можете использовать justify-content: flex-start в своем классе.

.container{
    width:80px;
    margin:0 auto;
    justify-content:flex-start;
    display:flex;   
}

Вам придется изменить свой HTML:

<div class="container">
<div><img src="photo1.jpg" class="card_img" /></div>
<div><img src="photo1.jpg" class="card_img" /></div>
</div>

Если вы не хотите использовать flexbox, вы можете использовать float: left. Я предпочитаю flexbox, хотя.

ваш первый div имеет класс «контейнеры» вместо «контейнер». Вы должны дать оба одинаковых имени класса.

Вы также можете добавить «float: left» в ваш css, чтобы показать ваши изображения рядом:

.container {
    width:80px;
    margin:0 auto;
    justify-content:center;
    display:flex;   
    float: left;
}