images and buttons are not horizontally aligned

Question

I have met some problems while doing a image-viewer project. The problem is that my buttons and the image are not following justify-content property, which they don't distributed equally inside my div block, how could it be solved? Also the image is not centered as the title does despite I set the align item property. I dow know how to fix that. I've searched over the website for solutions but none of them seems working. Could anyone help me, please? Thanks in advance.

Here are the html and css code:

<div class="image-viewer__container">
            <div class="image-viewer__title">Image Viewer</div>
            <div class="image-viewer__main">
                <div class="image-viewer__button"><img src="./images/back.png" id="previous" /></div>
                <div class="image-viewer__display" style="background-image: url(./images/loading.gif);background-repeat: no-repeat; background-position: center;">
                    <img src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" id="display">
                    <div class="image-viewer__display-source-wrapper">
                        <span><a href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" target="_blank">
                        https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
                        </span>
                    </div>
                </div>
                <div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
            </div>
</div>

.image-viewer__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.image-viewer__title {
    font-size: 5rem;
    font-weight: 600;
    color: #615dec;
    margin: 0;
    margin-top: 2rem;
}

.image-viewer__main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;

}

.image-viewer__button {
    display: inline;
    background: none;
    border: none;
    border-radius: 50%;
}

.image-viewer__button img {
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}
.image-viewer__display {
    position: relative;
    padding: 15px;
    margin: 3rem;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.6rem;
}

.image-viewer__display-source-wrapper {
    position: absolute;
    font-size: 12px;
    left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
    min-width: 100em;
    text-align: center;
    bottom: 0;
}

#display {
    object-fit: contain;
    width: 50rem;
    height: 30rem;
    margin-bottom: 1rem;
}

#source {
    display: inline;
    color: black;
}

Answer 1

This is because you've set a fixed width to your image. By setting the main image to 100% the image will fit and fill up the remaining space so the 3 elements are always distributed equally.

main image size = full width - both your arrows

current

    #display {
        object-fit: contain;
        width: 50rem; /*fixed width*/
        height: 30rem; /*fixed width*/
        margin-bottom: 1rem;
    }   

amended

    #display {
        margin-bottom: 1rem;
        width: 100%; /*was added*/
        height: auto; /*was added*/
    }

jsFiddle

Answer 2

在 css 按钮中添加 css float:"right" 。