Как разместить все div в одну строку так, чобы элементы не "вылазили" за границу?

Я хочу, чтобы все карточки здесь были в одну строку. Как мне это сделать?

HTML

{% extends "layout/layout.html" %}

{% load static %}

{% block content %}
    <div class="app-content" >
        {% for game in games %}
        <div class="app">
            <a href="{% url 'detail' game.pk %}">
                <img src="{% static game.image_path %}" alt="">
                <p class="appname" >{{ game.name }}</p>
            </a>
        </div>
    {% endfor %}
    </div>
{% endblock %}

CSS

body {
    background-color:#eeeeee;
}

nav a {
    text-align:center;
    color:green;
}

.app-content {
    overflow-x: scroll;
    height: 400px;
    display: inline-block;
}

.app {
    background-color:gray;
    border-radius:50px;
    float:left;
    margin-top:20px;
    margin-left:20px;
    display: inline-block;
}

.app p {
    margin:15px;
    font-size:25px;
}

.app img {
    border-radius:50px 50px 0 0;
    width:543px;
    height:280px;
}

Вернуться на верх