Подскажите, в чем проблема?
Каким образом контейнер skills начинает накладываться на предыдущий контейнер team, если выставить второму display flex? При любом другом значении display все нормально, skills располагается дальше по странице снизу
/* Team */
.team-cards {
width: 60%;
margin: auto;
display: flex;
}
.spec-card {
margin-right: 40px;
}
.spec-card:last-child {
margin-right: 0;
}
.spec-card h4 {
font-size: 15pt;
margin-bottom: 5px;
}
.spec-card h5 {
font-size: 14.5pt;
font-weight: normal;
}
.spec-card p {
width: 100%;
margin-top: 30px;
font-size: 13pt;
}
.spec-card .img {
height: 110%;
width: 100%;
background-color: #666;
margin-bottom: 25px;
}
.spec-links img {
height: 20px;
margin-top: 30px;
margin-right: 5px;
}
.spec-links img:hover {
opacity: 0.5;
}
/* ____ */
/* У skills кроме шрифта стилей больше нет */
<div class="team">
<h2>Our Team</h2>
<p id="italic">Aliquam dapibus massa diam, eu porta ipsum mollis vel. Etiam blandit auctor</p>
<div class="team-cards">
<div class="first-card spec-card">
<div class="img"></div>
<h4>Richard Jones</h4>
<h5>Android Developer</h5>
<p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
<div class="spec-links">
<a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
<a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
<a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
<a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
</div>
</div>
<div class="second-card spec-card">
<div class="img"></div>
<h4>Megan Turner</h4>
<h5>Print Designer</h5>
<p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
<div class="spec-links">
<a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
<a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
<a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
<a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
</div>
</div>
<div class="third-card spec-card">
<div class="img"></div>
<h4>Victor Green</h4>
<h5>IT Programmer</h5>
<p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
<div class="spec-links">
<a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
<a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
<a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
<a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
</div>
</div>
<div class="fourth-card spec-card">
<div class="img"></div>
<h4>Amy Watkins</h4>
<h5>Digital Marketing Specialist</h5>
<p>Vivamus porta et nunc vitae lacinia. Nam sed fermentum metus. Maecenas ut tortor mi. Maecenas pellentesque ex in bibendum euismod</p>
<div class="spec-links">
<a href="https://www.facebook.com" target="_blank"><img src="assets/facebook.svg" alt=""></a>
<a href="https://www.linkedin.cn" target="_blank"><img src="assets/linkedin.svg" alt=""></a>
<a href="https://twitter.com" target="_blank"><img src="assets/twitter.svg" alt=""></a>
<a href="https://www.plus.google.com" target="_blank"><img src="assets/google-plus-logo.svg" alt=""></a>
</div>
</div>
</div>
</div>
<div class="skills">
<h2>Our Skills</h2>
</div>
height: 110%
так как вы создали бесконечную рекурсию