Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 73935

Nested Div container breaking flex wrap

$
0
0

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>


Viewing all articles
Browse latest Browse all 73935

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>