html - 添加 CSS 卡会在网站上留下不需要的白色空间

Question

在移动模式下使用网站时出现不需要的空白区域，并且 CSS 卡与容器重叠。当容器中只有一张卡时没有问题，但是当我尝试只添加一张时，就会出现空白。

请不要苛刻，因为我是一个自学成才的程序员。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/*Media Queries*/
/*Set the media query for mobile*/
@media only screen and (max-width: 400px){
    /*CSS rules for mobiles only*/
    #nav-bar{
        background-color: salmon;
    }
}


/*Start of Stack */

#stack-cards{
    display: flex;
}

#stack-container{
    display: flex;
}
.stack{
    background-color: #000000;
}

.stack header{
    text-align: center;
    justify-content: center;
    color: #FCA311;
}

#card-css{
    max-height: 50vh;
    border-style: none;
    justify-content: center;
    align-items: center;
    margin: 40px;
    background: rgb(20,137,251);
    background: linear-gradient(45deg, rgba(20,137,251,1) 15%, rgba(255,255,255,1) 100%); 
}

#card-html5{
    max-height: 50vh;
    border-style: none;
    justify-content: center;
    align-items: center;
    margin: 40px;
    /*background: rgb(20,137,251);
    background: linear-gradient(45deg, rgba(20,137,251,1) 15%, rgba(255,255,255,1) 100%);*/ 
    background: rgb(240,101,41);
    background: linear-gradient(45deg, rgba(240,101,41,1) 15%, rgba(255,255,255,1) 100%);
}

#card-bootstrap{
    max-height: 50vh;
    border-style: none;
    justify-content: center;
    align-items: center;
    margin: 40px;
    background: rgb(90,20,251);
    background: linear-gradient(45deg, rgba(90,20,251,1) 15%, rgba(255,255,255,1) 100%); 
}

标签： htmlcsstwitter-bootstrap

Answer 1

放置带有 flex 方向的卡片：列。