Сделать прокрутку содержимого горизонтально внутри контейнера

Question

Итак, я хочу создать эффект, подобный приведенному здесь: https://www.bookdepository.com/, где книги, которые не помещаются горизонтально, просто прокручивают вправо. Я попытался с первым ответом в этой теме: Сделать содержимое горизонтально прокрутить внутри div , но безуспешно. Любые мысли или идеи о том, как сделать эту работу, будут оценены. Спасибо за ваше время.

В настоящее время то, что у меня выглядит, выглядит так: Снимок экрана

Код, отображающий страницу:

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