Elements not scaling properly when I zoom in and out - html

Question

I'm working on a freecodecamp project and I can't seem to get any of the content to look normal when I zoom in or view it on my phone.
The "BTS" title is supposed to be on the center of the image but the text moves around and the image doesn't fill up the page all the way whenever I zoom in. Same goes for the circular images on the bottom. I'm trying to create two rows: 4 images on the first and 3 on the second row.
I have no idea what went wrong with my code.
What I included was only the parts that were messing up. The entire page is here
#img-div {
position: relative;
max-width: 100%;
height: auto;
}
#title {
position: absolute;
width: 100%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Bodoni Moda", serif;
font-size: 200px;
text-align: center;
}
#members {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
}
#members2 {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
}
.smaller-image {
width: 200px;
}
.border {
border-width: 0px;
border-radius: 50%;
<div class="container" id="bts-wsj">
<img id="img-div" src="https://i.imgur.com/Th9Y0WO.jpg" alt="BTS-WSJ" style="width: 100%;">
<h1 id="title">BTS</h1>
</div>
<div class="container" id="members">
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/HuZWnjV.jpg" alt="jimin">
<p>Jimin</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/yk5C7kz.jpg" alt="jungkook">
<p>Jungkook</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/JBEGNJw.jpg" alt="jin">
<p>Jin</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/7SJwU5t.jpg" alt="rm">
<p>RM</p>
<div class="container" id="members2">
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/pOFFDdi.jpg" alt="j-hope" id="hobi">
<p>J-Hope</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/tjMeZ9d.jpg" alt="v" id="v">
<p>V</p>
<a href="#"><img class="smaller-image border" src="https://i.imgur.com/MNB1YBS.jpg" alt="suga" id="suga">
<p>Suga</p>
</div>

Answer 1

In your Html code, complete div and a tag. in BTS title to set mobile view use media query CSS so when you show your site in mobile view set as proper. Use this code to set your circular images in a row.
body {
margin: 0;
}
#img-div {
position: relative;
max-width: 100%;
height: auto;
}
#bts-wsj {
position: relative;
}
#title {
position: absolute;
width: 100%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Bodoni Moda", serif;
font-size: 200px;
text-align: center;
}
#members,
#members2 {
width: 100%;
background: white;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
#members a,
#members2 a {
padding: 20px;
}
.smaller-image {
width: 200px;
}
.border {
border-width: 0px;
border-radius: 50%;
}
#media only screen and (max-width: 1024px) {
#title {
font-size: 150px;
}
}
#media only screen and (max-width: 768px) {
#title {
font-size: 100px;
}
}
#media only screen and (max-width: 480px) {
#title {
font-size: 50px;
}
}
<div class="container" id="bts-wsj">
<img id="img-div" src="https://i.imgur.com/Th9Y0WO.jpg" alt="BTS-WSJ" style="width: 100%;">
<h1 id="title">BTS</h1>
</div>
<div class="container" id="members">
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/HuZWnjV.jpg" alt="jimin">
<p>Jimin</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/yk5C7kz.jpg" alt="jungkook">
<p>Jungkook</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/JBEGNJw.jpg" alt="jin">
<p>Jin</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/7SJwU5t.jpg" alt="rm">
<p>RM</p>
</a>
</div>
<div class="container" id="members2">
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/pOFFDdi.jpg" alt="j-hope" id="hobi">
<p>J-Hope</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/tjMeZ9d.jpg" alt="v" id="v">
<p>V</p>
</a>
<a href="#">
<img class="smaller-image border" src="https://i.imgur.com/MNB1YBS.jpg" alt="suga" id="suga">
<p>Suga</p>
</a>
</div>