Why is my img flowing out of my div in dev tool?-CodePudding

I am new to programming, learning HTML CSS. I have a flowing img out of my div which is the .team-main. It affects the width of the other sections. How can I stop this? so my sections do not cover the page horizontally because of this. Can somebody help me fix this please?

this is the ss of the background color: 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 >
        <div >
          <h1 id="team">OUR AMAZING TEAM</h1>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>

        <div >
          <div >
            <img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/1.jpg" alt="" />
            <h2>Parveen Anand</h2>
            <p>Lead Designer</p>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a> </div>
         

          </div>

          <div >
            <img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/2.jpg" alt="" />
            <h2>Diana Petersen</h2>
            <p>Lead Marketer</p>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a> </div>
           </div>

          <div >
            <img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/3.jpg" alt="" />
            <h2>Larry Parker</h2>
            <p>Lead Developer</p>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a></div>
            <div ><a href=""><i ></i></a> </div>
          </div>

        </div>
        <p >
          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>

https://codepen.io/mizginyildirak/pen/ZERzOVx

CodePudding user response：

I will keep it simple, whenever you decide to use flex attribute on a row avoid using width attribute on that element, especially the 100% value. Because flex items by default are set to flex-shrink: 1, which means they are permitted to shrink in order to fit inside the container. Therefore by specifying the width: 100%; attribute for the container, you will break this rule.

So removing width: 100%; from team-members class will fix the problem.

...
.team-members {
  width: 100%; /* remove this line */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 3rem 5rem 5rem;
}
...

Update

First off, you also need to remove width: 100%; from the #team element too, then instead of giving each image within the flex container the margin (margin: 1rem 7rem), give its parent the gap property. Keep in mind the margins will make the container box larger therefore the contents will overflow from the main targeting theme.

Change your CSS code like this and you will fix the issue.

...
.team-members {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7rem;
  text-align: center;
  margin: 3rem 5rem 5rem;
}
...
.team-member img {
  height: 220px;
  width: 220px;
  margin: 1rem 0;
  border-radius: 50%;
  border: 8px solid #d4d5d7;
}
...

CodePen: https://codepen.io/smalikss/pen/wvXwzjy

CodePudding user response：

It's because of two things:

The images have defined height and width values, and so can't scale responsively
There is a huge amount of margin on a couple elements that cause the images to overflow their container

Ultimately, the issue is just that the flexed elements are too wide to reside entirely inside the container, so it overflows. It's a classic CSS problem.

How to fix

For #1, simply remove the height and width values, and instead use:

img {
  max-width: 100%;
  height: auto;
}

For #2, reduce the margins at small screen resolutions with breakpoints.

img {
  max-width: 100%;
  height: auto;
}

.flex {
  display: flex;
  width: 100%;
}

.flex-item {
  margin: 1rem;
}

@media (min-width: 768px) {
  .flex-item {
    margin: 3rem 5rem 5rem;
  }
}

<div >
  <div >
    <img src="https://via.placeholder.com/500">
    <p>Name 1</p>
  </div>
  <div >
    <img src="https://via.placeholder.com/500">
    <p>Name 2</p>
  </div>
  <div >
    <img src="https://via.placeholder.com/500">
    <p>Name 3</p>
  </div>
</div>