tengo un problema con un trabajo que estoy realizando, quiero realizar unas figuras a base de DIVS la primera linea o se podria llamar la parte de arriba de la figura la he podido realizar el problema es que al momento de realizar la parte de abajo o la linea que esta por debajo de la primera los divs de mi primera linea se juntan con los de la primera a pesar de que les agrego un margin-top y un margin-left soy principiante en web asi que no conozco muchos trucos, les agradezco de antemano.

Este es mi HTML
[![Esta es mi HTML][1]][1]
Este mi CSS



[![introducir la descripción de la imagen aquí][3]][3]

Y Asi es como se visualiza
[![introducir la descripción de la imagen aquí][2]][2]

Y lo que requiero es que no se junte con los divs de arriba

  [1]: https://i.sstatic.net/VW0qC.png
  [2]: https://i.sstatic.net/npIHP.png
  [3]: https://i.sstatic.net/b2r1N.png


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    #uno {
      margin-left: 800px;
    }

    #dos {
      margin-right: 100px;
    }

    .gorra {
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
    }

    .gorra1 {
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
      margin-top: 50px;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <body>
      <div id="uno">
        <div class="gorra"></div>
        <div class="gorra"></div>
        <div class="gorra"></div>
        <div class="gorra"></div>
        <div class="gorra"></div>
      </div>

      <div id="dos">
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
        <div class="gorra1"></div>
      </div>
    </body>
    </html>

<!-- end snippet -->