html - 如何修复我的容器，使其在完成后不再继续？

Question

1 3我在我网站上的某个部分中的容器出现问题。问题是在我完成内容之后它会继续并在我的网站上留下一个巨大的空白空间并且不确定什么是最好的解决方法。我试图为页面制作一个单独的容器，但空白空间随后进入页脚下方的网站底部。我尝试做的最后一件事是更改容器的最大和最小大小，但这会破坏其他页面。

HTML

<section id="section_music" class="section-padding">
    <div class="section">
        <div class="container mb-4">

CSS

.container {
    align-content: center;
    padding-bottom: 10px;
    padding-top: 10px;
}

.kamikaze{
    position: relative;
    top: 0px;
    left: -500px;
}

.revival{ 
    position: relative;
    top: -230px;
    left: -270px;
}

.tmmlp2{ 
    position: relative;
    top: -460px;
    left: -40px;
}

.recovery{ 
    position: relative;
    top: -690px;
    left: 190px;
}


.relapse{ 
    position: relative;
    top: -920px;
    left: 420px;
}

.encore{ 
    position: relative;
    top: -920px;
    left: -500px;
}

.tems{ 
    position: relative;
    top: -1150px;
    left: -270px;
}

.elp1{ 
    position: relative;
    top: -1380px;
    left: -40px;
}

.tsslp{ 
    position: relative;
    top: -1610px;
    left: 190px;
}

.infinite{ 
    position: relative;
    top: -1840px;
    left: 420px;

标签： htmlcss