我是编程新手，学习HTMLcss.我的div中有一个流动的img，它是.Team-Main.它会影响其他部分的宽度.我怎么才能阻止这一切？因此，我的部分不会因为这一点而水平覆盖页面.有没有人能帮我修一下这个？
这是背景 colored颜色 的ss:Not fitting background color
#team {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f8f9fa;
margin-top: 5rem;
}
.team-main {
width: 100vw;
height: 800px;
align-items: center;
text-align: center;
}
.team-title h1 {
margin-bottom: 1rem;
font-size: 40px;
}
.team-title p {
color: #6c757d;
font-style: italic;
font-size: larger;
text-align: center;
}
.team-member p {
color: #6c757d;
font-size: large;
font-weight: 100;
margin: 0.4rem 0 1rem;
}
.team-members {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 3rem 5rem 5rem;
}
.team-members-middle {
text-align: center;
width: 50%;
margin: auto;
color: #6c757d;
}
.team-member {
width: 100%;
}
.team-member img {
height: 220px;
width: 220px;
margin: 1rem 7rem;
border-radius: 50%;
border: 8px solid #d4d5d7;
}
.team-member .member {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #111212;
}
.team-member .member i {
font-size: 16px;
color: white;
}<section id="team">
<div class="team-main">
<div class="team-title">
<h1 id="team">OUR AMAZING TEAM</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="team-members">
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/1.jpg" alt="" />
<h2>Parveen Anand</h2>
<p>Lead Designer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/2.jpg" alt="" />
<h2>Diana Petersen</h2>
<p>Lead Marketer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/3.jpg" alt="" />
<h2>Larry Parker</h2>
<p>Lead Developer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
</div>
<p class="team-members-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque,
laboriosam veritatis, quos non quis ad perspiciatis, totam corporis
ea, alias ut unde.
</p>
</div>