Почему мои элементы div не центрируются на странице, а выстраиваются в линию?

Question

Этот код делает div'ы всей строкой, но они не выровнены по центру страницы. Я просмотрел множество других сообщений об этом, и ни один из них, похоже, не работает для меня.

HTML:

<div class="both">

    <div class="contain">

    <div class="left-large-image"></div>

</div>

<div class="contain">


<div class="middle-large-image"></div>

</div>
<div class="contain">


<div class="right-large-image"></div>

</div>
</div>

CSS:

        .left-large-image{
width:26rem;
height:20rem;
margin:1rem;
margin-bottom:0;
background-size:cover;
background-image: url("https://i.ibb.co/xqrZzD6/pla.jpg");};

.middle-large-image{
width:26rem;
display:block;
height:20rem;
margin:1rem;
margin-bottom:0;
background-size:cover;
background-image: url("https://i.ibb.co/6HfCtBm/messi.jpg");};

        .right-large-image{
width:26rem;
display:block;
height:20rem;
margin:1rem;
margin-bottom:0;
background-size:cover;
background-image: url("https://i.ibb.co/vP723BQ/zlatan.jpg");};

    .contain{
float:left;
display:inline-block;
margin-left:auto;
margin-right:auto;
vertical-align: middle;}

Может быть, левый float как-то связан с этим?