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 -->