Cетки/ Испытание №27/ хз как получил 100%


#1

Здравствуйте. Выполнил испытание на 100%, но я чувствую что мой код очень далёк от идеала, поэтому хотелось бы узнать насколько далёк и что было бы лучше изменить. Спасибо.

        <body>
                    <div class="header">
                        <div class="header1 clearfix">Header</div>
                        <div class="menu clearfix">Menu</div>
                        <div class="promo1 clearfix">Promo 1</div>
                        <div class="promo2 clearfix">Promo 2</div>
                    </div>
                    <div class="container">
                        <div class="column1 clearfix">Left</div>
                        <div class="column2 clearfix">Main</div>
                        <div class="column3 clearfix">Right</div>
                        
                    </div>
      </body>

            
            html,
            body {
                margin: 0;
                padding: 0;
            }

            body {
                width: 450px;
                height: 335px;
                font-family: "Arial", sans-serif;
                font-size: 10px;
                color: white;
            }

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

            .header{
                background-color:#34495e ;
                height: 165px;
                padding-top:5px;
            }

            .header1 {
                background-color: #c0392b;
                width: 340px;
                height: 25px;
                margin-left: auto;
                margin-right: auto;
                padding: 5px;
                margin-top: 5px;
            }

            .menu{
                background-color: #3498DB;
                width: auto;
                height: 25px;
                margin-top: 10px;
                padding: 5px 55px
            }

            .promo1{
                background:#c0392b;
                float: left;
                margin-top: 10px;
                margin-left: 50px;
                width: 160px;
                height: 50px;
                padding: 5px;
            }

            .promo2{
                background:#c0392b;
                margin-top: 10px;
                margin-right: 50px;
                float: right;
                width: 160px;
                height: 50px;
                padding: 5px;
            }

            .column1{
                background-color:#3498DB;
                float: left;
                margin-top: 10px;
                margin-left: 50px;
                width: 60px;
                height: 100px;
                padding: 5px;
            }

            .column2{
                background-color:#3498DB;
                float: left;
                margin: 10px 10px;
                padding: 5px;
                width: 180px;
                height: 100px;
            }

            .column3{
                background-color:#3498DB;
                float: right;
                padding: 5px;
                margin-top: 10px;
                margin-right: 50px;
                width: 60px;
                height: 100px;
            }

            .footer1{
                background-color: #34495e;
                padding:5px 55px;
                width: auto;
                height: 26px;
                margin-top: 130px
                
            }

#2

Помогите разобраться. Испытание: строим сетку [27/32]


#3

https://jsfiddle.net/Toxa91/38feozx8/

тоже хотел бы почитать критику, выполнил на 100% но и сам не понял как, может что лишнее и что-то можно было проще написать