нарды проект в javascript ваниле, css, html

Question

введите описание изображения здесь

это моя игра в полноэкранном режиме, так как красная граница - это мое тело игры, желтая граница - это моя доска, красная граница - это моя левая часть доски, а синяя рамка - моя правая часть доски, розовая рамка - для дива, который обернут съеденных солдат. Это CSS:

.board{
    width: 69.5%;
    height: 99%;
    border: 3px yellow solid;
    position: relative;
    left: 15%;
    background: url('../../resources/Borad_img/board.png');
    background-position: center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
}
.board__leftPart{
    border: red 2px solid;
    width: 38%;
    height: 84.8%;
    margin-left: 9%;
    margin-top:55px;
    display: flex;
    flex-direction: column;
}
.board__rightPart{
    border: blue 2px solid;
    width: 38%;
    height: 84.8%;
    margin-top:55px;
    margin-right: 9%;
    display: flex;
    flex-direction: column;
}
.board__eatenRow{
    border: solid palevioletred 2px;
    width: 5.5%;
    height: 100%;

}

У меня проблема с размером мобильного устройства: левая (красная рамка обернута div) и правая (синяя рамка обернута div) часть моей доски поднимается и не не могу изменить, как я думал. посмотрите на эту картинку в мобильном размере введите описание изображения здесь мой вопрос: почему она добавляется и как я могу это исправить ?? это хранилище в git: https://github.com/x1tmwz/BackgammonV2.git