I have several nested <div>
containers within my html code set to flex wrap. So far it's worked fine until I get to the footer, where I nest those containers within another <div>
container. When I do this, the wrapping for the css breaks and it makes a row where the images are on and combines with an <hr>
, then each nested div within it acts as if it is a block and stacks vertically. I can't figure out why the wrapping breaks. I've tried changing the final <div>
containers to <section>
and other containers but nothing changes. Below is the code
.hr2{
background-color: hsl(0, 0%, 98%);
}
.pic-left{
float: left;
}
.pic-right{
float: right;
margin-right: 10px;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
}
.fmenu-container {
background-color: hsl(0, 0%, 98%);
margin: 0 0 140px 0;
}
.fmenu {
color: gray;
font-family: 'Karla', sans-serif;
font-weight: bold;
text-align: left;
text-transform: uppercase;
}
.fmenu-1 {
margin-left: 100px;
}
.fmenu-1,
.fmenu-2,
.fmenu-3,
.fmenu-4 {
width: 310px;
}
<div class="page">
<div class="section fmenu-container">
<!--footer menu-->
<img class="pic-left" src="images\logo.svg" alt="Insure-logo">
<img class="pic-right" src="images\icon-instagram.svg" alt="instagram">
<img class="pic-right" src="images\icon-pinterest.svg" alt="pinterest">
<img class="pic-right" src="images\icon-twitter.svg" alt="twitter">
<img class="pic-right" src="images\icon-facebook.svg" alt="facebook">
<hr class="hr2">
<div class="fmenu fmenu-1">
Our company<br>
<br>
<a class="flink" href="#">How we work<br></a>
<a class="flink" href="#">Why Insure?<br></a>
<a class="flink" href="#">View plans<br></a>
<a class="flink" href="#">Reviews<br></a>
</div>
<div class="fmenu fmenu-2">
Help me<br>
<br>
<a class="flink" href="#">FAQ<br></a>
<a class="flink" href="#">Terms of use<br></a>
<a class="flink" href="#">Privacy policy<br></a>
<a class="flink" href="#">Cookies<br></a>
</div>
<div class="fmenu fmenu-3">
Contact<br>
<br>
<a class="flink" href="#">Sales<br></a>
<a class="flink" href="#">Support<br></a>
<a class="flink" href="#">Live chat<br></a>
</div>
<div class="fmenu fmenu-4">
Others<br>
<br>
<a class="flink" href="#">Careers<br></a>
<a class="flink" href="#">Press<br></a>
<a class="flink" href="#">Licenses<br></a>
</div>
</div>