CSS HTML <div> problem with window resizing

Question

I need the last two divs to go under the first two when i am resizing the window. It does that but the third div goes under on the right and le fourth div goes on the left, under the third one. I can't seems to find why. Like this:

DIV1  DIV2

      DIV3
DIV4

Once resized, I want them to look like this:

DIV1  DIV2

DIV3  DIV4

Any help is welcome.

Thanks!

HTML:

 <div class="section4a">
        <div class="list">
            <p class="header">South Asia</p>
            <p class="country">
                Bangladesh <br>
                Maldives <br>
                Pakistan <br>
                Nepal <br>
                Bhutan <br>
                India
            </p>
        </div>
        <div class="list">
            <p class="header">South Asia</p>
            <p class="country">
                Panama <br>
                Nicaragua <br>
                Bahamas <br>
                Canada <br>
                Mexico
            </p>
        </div>
        <div class="list">
            <p class="header">Middle East</p>
            <p class="country">
                Bahrain <br>
                Cyprus <br>
                Egypt <br>
                Iran <br>
                Jordan <br>
                Kuwait
            </p>
        </div>
        <div class="list">
            <p class="header">South America</p>
            <p class="country">
              Guyana <br>
              Paraguay <br>
              Colombia <br>
              Bolivia <br>
              Brazil
          </p>
      </div>
  </div>

CSS:

.section4a {
    margin-left: 13%;
    margin-top: 155px;
    width: 100%;
}

.section4a .list {
    float: left;
    margin-right: 12%;
}

.section4a .list:after {
  content: "";
  display: table;
  clear: both;
}

Answer 1

Remove rule float: left. Add the inline block display as display: inline-block, and the top vertical alignment as vertical-align: top, for .section4a .list {}.

.section4a {
    margin-left: 13%;
    margin-top: 155px;
    width: 100%;
}

.section4a .list {
    margin-right: 12%;
    display: inline-block;
    vertical-align: top;
}

.section4a .list:after {
    content: "";
    display: table;
    clear: both;
}

<div class="section4a">
    <div class="list">
        <p class="header">South Asia</p>
        <p class="country">
            Bangladesh <br />
            Maldives <br />
            Pakistan <br />
            Nepal <br />
            Bhutan <br />
            India
        </p>
    </div>
    <div class="list">
        <p class="header">South Asia</p>
        <p class="country">
            Panama <br />
            Nicaragua <br />
            Bahamas <br />
            Canada <br />
            Mexico
        </p>
    </div>
    <div class="list">
        <p class="header">Middle East</p>
        <p class="country">
            Bahrain <br />
            Cyprus <br />
            Egypt <br />
            Iran <br />
            Jordan <br />
            Kuwait
        </p>
    </div>
    <div class="list">
        <p class="header">South America</p>
        <p class="country">
            Guyana <br />
            Paraguay <br />
            Colombia <br />
            Bolivia <br />
            Brazil
        </p>
    </div>
</div>

Answer 2

I would use display: flex on you section element with max-width on the list elements. This way it is responsive on all screen sizes. And also you don't need that clear-hack for floats anymore :)

.section4a {
  margin-left: 13%;
  margin-top: 155px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.section4a .list {
  min-width: 300px;
}