Перенос div'ов по строкам

Question

Проблема такая: в HTML есть блок games-container, внутри которого находится несколько блоков класса game-tile. Дело в том, что, если добавить блоки game-tile так, чтобы они выходили за границу экрана, исчезает весь games-container.

HTML:

<html>
<head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/hub.css">
        <title>Lorem Ipsum</title>
</head>
<body>
        <div class="header">
                <img class="icon1" src="resources/logo.jpg" href="index.html">
                <h1 class="header-name" href="index.html">Lorem Ipsum</h1>
        </div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</h2>
        <div class="left-coloumn-container">
                <div class="left-coloumn">
                        <p class="genres-title">Игры по жанрам</p>
                        <hr>
                        <div class="genre" onclick="switchFilter('antistress')">
                                <p class="genre-label" id="antistress-filter">Антистрессы (1)</p>
                        </div>
                        <hr>
                        <div class="genre" onclick="switchFilter('race')">
                                <p class="genre-label" id="race-filter">Гонки (0)</p>
                        </div>
                        <hr>
                        <div class="genre" onclick="switchFilter('platformer')">
                                <p class="genre-label" id="platformer-filter">Платформеры (0)</p>
                        </div>
                        <hr>
                        <div class="genre" onclick="switchFilter('clicker')">
                                <p class="genre-label" id="clicker-filter">Кликеры (0)</p>
                        </div>
                        <hr>
                        <div class="genre" onclick="switchFilter(null)">
                                <p class="genre-label">Сбросить фильтр</p>
                        </div>
                </div>
        <img class="ad-left" src="resources/ad.jpg" onclick="window.location = 'https://ru.m.wiktionary.org/wiki/scam'">
        </div>
        <div class="games-container-container">
                <div class="games-container">
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                        <div class="game-tile" id="uwu">
                                <div class="game-tile-overlay"></div>
                        </div>
                </div>
        </div>

        <script type="text/javascript" src="js/hub.js"></script>
</body>
</html>

CSS:

        font-family: 'Comic CAT';
        src: local('Comic CAT'),
                url('../resources/ComicCAT.otf');
}

* {
        margin: 0;
        padding: 0;
}

body {
        padding: 20px;
        padding-top: 150px;
        font-family: 'Comic CAT';
}

.icon1 {
        width: 85px;
        height: 85px;
        float: left;
        margin-right: 30px;
        border-radius: 20px;
}

.header {
        background-color: rgb(204, 204, 255);
        padding: 20px;
        margin: -150px -20px 0 -20px;
        font-size: 40px;
        border-radius: 0 0 20px 20px;
        width: 100%;
        height: 90px;
        position: fixed;
        border-color: black;
        border-right-style: solid;
        border-bottom-style: solid;
}

.description {
        margin-bottom: 20px;
}

.description, .genre-label {
        font-size: 20px;
}

.ad-left {
    margin-left: 20px;
    margin-top: 50px;
    width: 200px;
    border-radius: 10px 10px 10px 10px;
    border-color: black;
        border-right-style: solid;
        border-bottom-style: solid;
        cursor: pointer;
}

.left-coloumn-container {
    width: 200px;
    text-align: center;
    float: left;
    margin-right: 90px;
}

.left-coloumn {
        text-align: left;
        background-color: rgb(204, 204, 255);
        margin: 0 20px 20px -20px;
        display: inline-block;
        padding: 4px 20px 0 0;
        border-radius: 0 10px 10px 0;
        border-color: black;
        border-right-style: solid;
        border-bottom-style: solid;
        width: 250px;
        float: left;
}

hr {
        margin: 0 -20px 0 -20px;
        border: 1px solid rgba(0, 0, 0, 0.3);
}

.genres-title {
        font-size: 30px;
        margin-left: 20px;
}

a {
        text-decoration: none;
        color: black;
}

.genre {
        cursor: pointer;
        padding: 4px 0 4px 20px;
        width: 100%;
}

.genre:hover {
        background: rgb(230, 230, 255);
}

.games-container-container {

}

.games-container {
        float: left;
}

.game-tile {
        border-radius: 10px;
        width: 180px;
        height: 180px;
        float: left;
        cursor: pointer;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        background-size: 180px 180px;
}

.game-tile-overlay {
        background-color: rgba(255, 255, 255, 0);
        border-radius: 10px;
        height: 100%;
}

.game-tile-overlay:hover {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        height: 100%;
}

#uwu {
        background-image: url('../games/uwu/icon.png');
}

#lineRace {
        background-image: url('../resources/logo.jpg');
}

Возможно, форматирование потерялось по дороге копрования, если что не так, не обращайте внимания

БЛОГ НА HUSL

Перенос div'ов по строкам

Ответы (0 шт):