html,pozycjonowanie,css

pytanie zadane 29 sierpnia 2018 w HTML i CSS przez anonim12345 Użytkownik (510 p.)
edycja 29 sierpnia 2018 przez anonim12345

Cześć, całkiem niedawno zabrałem się za kurs tworzenia stron internetowych. Moim problemem jest to że drugi div klasy square nie chce się ułożyć obok pierwszego diva tej samej klasy. Drugim problemem jest to że pod tymi divami powinien być kolor tła dziedziczony z diva (container). Pod spodem dodaje swój kod i mam nadzieję że ktoś będzie w stanie mi pomóc.

kod indexu:

<!DOCTYPE HTML>
        <head>
            <html lang='pl'/>
            <meta charset="utf-8" />
            <link rel='stylesheet' href='style.css' type='text/css'/>
        </head>
        <body>
            <div id='container'>
                <div class='rectangle'>
                    <div id='logo'>logo</div>
                    <div id='zegar'>zegar</div>
                </div>
                <div style='clear:both;'/>
                    <div>
                        <div class='square'>
                            <div class='tile1'>1</div>
                            <div class='tile1'>1</div>
                               <div style='clear:both;'/>
                            <div class='tile2'>2</div>
                            <div class='tile3'>3</div>
                               <div style='clear:both;'/>
                             <div class='tile4'>4</div>
                        </div>
                        
                        <div class='square'>
                            <div class='tile5'>5</div>
                            <div style='clear:both;'/>
                            <div class='tile6'>6</div>
                            <div class='tile7'>7</div>
                            <div class='tile8'>8</div>
                            <div class='tile9'>9</div>
                        </div>
                    </div>
            </div>
        </body>
    </html>

kod stylów:

body{
    color:white;
}
#container{
    width:1000px;
    background-color:black;
    margin-left:auto;
    margin-right:auto;
}
.rectangle{
    text-align:center;
}
#zegar{
    float:left;
    width:480px;
    margin:10px;
}
#logo{
    float:left;
    width:480px;
    margin:10px;
}
.square{
    float:left;
    width:50%;
}
.tile1,.tile2{
    float:left;
    width:230px;
    height:150px;
    background-color:#00cccc;
    margin:10px;
}
.tile3{
    float:left;
    width:230px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}
.tile4{
    float:left;
    width:480px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}



.tile5{
    float:left;
    width:480px;
    height:340px;
    background-color:lightgrey;
    margin:10px;
}
.tile6{
    float:left;
    width:100px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}
.tile7{
    float:left;
    width:100px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}
.tile8{
    float:left;
    width:100px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}
.tile9{
    float:left;
    width:100px;
    height:150px;
    background-color:#ff66a3;
    margin:10px;
}