Make content scroll horizontally inside of a container

Question

So I want to create an effect similar to the one here: https://www.bookdepository.com/ where books that do not fit horizontally just scroll to the right. I tried with the first response in this thread: Make content horizontally scroll inside a div but with no luck. Any thoughts or ideas on how to make this work would be appreciated. Thank you for your time.

Currently, what I have looks like this: Screenshot

Code that renders a page:

<div class="container mainContent">
<div class="col-md-12 ">
    <h3>Other books in @Model.BookModel.Genre</h3>

    <div class="container-outer">
        @{

            foreach (var book in Model.SqlBookstoreDataModel.GetByGenre(@Model.BookModel.Genre))
            {
                if (book.Genre.Equals(Model.BookModel.Genre))
                {
                    <div class="col-md-2 col-sm-3 bookWrapper ">
                        <div class="hvr-shrink bookThumbnail">
                            <a href="">
                                <div class="hvr-shadow hvr-glow">
                                    <img src=@book.Thumbnail />
                                </div>
                            </a>
                        </div>


                        <a asp-action="Details" asp-route-id="@book.Id">
                            <div class="bookInfo">
                                <p class="Title ">@book.Title </p>
                                <p class="Author">@book.Author</p>
                                @{
                                    if (book.Price.Equals("Not Available"))
                                    {
                                        <p class="indexPrice">@book.Price</p>
                                    }
                                    else
                                    {
                                        <p class="indexPrice">@book.Price Kn</p>
                                    }
                                }
                            </div>
                        </a>

                        <div class="buttonWrap">
                            <button type="button" class="btn btn-primary AddToCartButton hvr-glow">Add to Cart</button>
                        </div>


                    </div>
                }
            }
        }
    </div>
</div>