27/32 90% выполнено. можно ли улучшить код?

Курсы §15. Сетки
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="under">
                <p>Header</p>
            </div>
        </div>
        <div class="menu">
            <p>Menu</p>
        </div>
        <div class="promo">
        	<p class="promo1">Promo 1</p>
        	<p class="promo2">Promo 2</p>
        </div>
        <div class="content">
        	<p class="left">Left</p>
        	<p class="main">Main</p>
        	<p class="right">Right</p>
        </div>
        <div class="footer">
        	<p>Footer</p>
        </div>
    </body>
</html>

CSS

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

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

		.header,
		.footer,
		.promo {
			background: #34495e;
		}
        
        .header {
            padding-top: 5px;
            height: 50px;
        }

		.under {
			background-color: #c0392b;
            width:350px;
            height:35px;
            margin: 5px auto;
		}

        .header p {
            margin: 0;
        }

        .menu {
            background-color: #3498db;
            height: 35px;
        }

        .menu p {
            padding-left: 55px;
            margin: 0;
        }
        
        .promo {
            height: 60px;
            padding-top: 5px;
        }

        .promo .promo1 {
            background-color: #c0392b;
            float: left;
            width: 165px;
            height: 40px;
            margin-left: 50px;
            margin-top: 5px;
        }

        .promo .promo2 {
            background: #c0392b;
            float: right;
            width: 165px;
            height: 40px;
            margin-right: 50px;
            margin-top: 5px;
        }

        .promo p {
            margin: 0;
        }

        .left,
        .right,
        .main {
            float: left;
            background: #3498db;
            margin-right: 10px;
            height: 110px;
        }

        .left,
        .right {
            width: 65px;
        }

        .main {
            width: 185px;
        }

        .left {
            margin-left: 50px;
        }

        .right {
            margin-right: 50px;
        }

        .footer {
            padding-left: 50px;
            height: 35px;
            clear: both;
        }
2

Можно.
Высоты у блоков фиксированные, центровщика и распорок нет.
Почитайте эту тему.

3

С высотой разобрался, но с центровщиком и распорками нет.

</head>
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="under">
                <p>Header</p>
            </div>
        </div>
    </div>
    <div class="menu">
        <div class="layout-positioner">
            <p>Menu</p>
        </div>
    </div>
        <div class="promo">
            <div class="layout-positioner">
        	   <p class="promo1">Promo1</p>
        	   <p class="promo2">Promo2</p>
            </div>
        </div>
        <div class="content">
            <div class="layout-positioner">
            	<p class="left">Left</p>
            	<p class="main">Main</p>
            	<p class="right">Right</p>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
        	        <p>Footer</p>
            </div>
        </div>
</body>

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

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

			.header,
			.footer,
			.promo {
				background: #34495e;
			}
            
            .header {
                padding-top: 5px;
                height: 50px;
            }

			.under {
				background-color: #c0392b;
                width:350px;
                min-height:35px;
                margin: 5px auto;
			}

            .header p {
                margin: 0;
            }

            .menu {
                background-color: #3498db;
                min-height: 35px;
            }

            .menu p {
                padding-left: 55px;
                margin: 0;
            }
            
            .promo {
                min-height: 60px;
                padding-top: 5px;
            }

            .promo .promo1 {
                background-color: #c0392b;
                float: left;
                width: 165px;
                min-height: 40px;
                margin-left: 50px;
                margin-top: 5px;
            }

            .promo .promo2 {
                background: #c0392b;
                float: right;
                width: 165px;
                min-height: 40px;
                margin-right: 50px;
                margin-top: 5px;
            }

            .promo p {
                margin: 0;
            }

            .left,
            .right,
            .main {
                float: left;
                background: #3498db;
                margin-right: 10px;
                min-height: 110px;
            }

            .left,
            .right {
                width: 65px;
            }

            .main {
                width: 185px;
            }

            .left {
                margin-left: 50px;
            }

            .right {
                margin-right: 50px;
            }

            .footer {
                padding-left: 50px;
                min-height: 35px;
                clear: both;
            }

            .layout-positioner {
                border: 2px dashed #3498db;
            }

            .layout-positioner::after {
                display: table;
                content: "";
                clear: both;
            }
4

А для чего центровщик у вас используется? Он только рамку добавляет. Ему нужна фиксированная ширина и автоматические внешние отступы.
Уточните, что именно вам непонятно.

5

в новой версии у меня все это есть, но как только я убираю бордер у positioner, то все отступы улетают. + непонятно как работают распорки

</head>
    <body>
        <div class="header">
            <div class="layout-positioner">
                <div class="under">
                    <p>Header</p>
                </div>
            </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">
                <div class="pod">
                    <p>Menu</p>
                </div>
            </div>
        </div>
        <div class="promo">
            <div class="layout-positioner">
            	<p class="promo1">Promo1</p>
            	<p class="promo2">Promo2</p>
            </div>
        </div>
        <div class="content">
            <div class="layout-positioner">
                <p class="left">Left</p>
                <p class="main">Main</p>
                <p class="right">Right</p>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
            	<p>Footer</p>
            </div>
        </div>
    </body>
</html>


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

			body {
			    width: 450px;
			    height: 335px;
			    font-family: "Arial", sans-serif;
			    font-size: 10px;
			    color: white;
			}
            
            .layout-positioner {
                border: 2px dashed ;
                margin: auto;
                width: 430px;
            }

            .layout-positioner::after {
                display: table;
                content: "";
                clear: both;
            }

            p {
                padding-top:5px;
                padding-left:5px;
            } 

			.header,
			.footer,
			.promo {
				background: #34495e;
			}
            
            .header {
                height: 50px;
            }

			.under {
				background-color: #c0392b;
                width:350px;
                min-height:35px;
                margin: 5px auto;
			}

            .header p {
                margin: 0;
            }

            .menu {
                background-color: #3498db;
                min-height: 35px;
            }

            .menu p {
                padding-left: 50px;
                margin: 0;
            }
            
            .promo {
                min-height: 60px;
            }

            .promo .promo1 {
                background-color: #c0392b;
                float: left;
                width: 165px;
                min-height: 40px;
                margin-left: 40px;
                margin-top: 5px;
            }

            .promo .promo2 {
                background: #c0392b;
                float: right;
                width: 165px;
                min-height: 40px;
                margin-right: 40px;
                margin-top: 5px;
            }

            .promo p {
                margin: 0;
            }

            .left,
            .right,
            .main {
                float: left;
                background: #3498db;
                margin-right: 10px;
                min-height: 110px;
            }

            .left,
            .right {
                width: 65px;
            }

            .main {
                width: 185px;
            }

            .left {
                margin-left: 40px;
            }

            .right {
                margin-right: 40px;
            }

            .left p,
            .main p,
            .right p {
                margin: 0px;
            }

            .footer {
                min-height: 35px;
                clear: both;
            }

            .footer p {
                padding-left: 50px;
                margin: 0;
            }
6

Про необходимость фиксированной ширины для центровщика я уже говорила.
Распорка в виде псевдоэлемента добавляется внутри layout-positioner после всех дочерних элементов как еще один “блок”. У него нет размеров, но его присутствие и свойство сlear: both; исправляют поток документа, и родительский блок больше не схлопывается по высоте.

7

вроде как я разобрался. посмотрите пожалуйста и выскажите свои замечания по упрощению или неправильности

8 
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="under">
                <p>Header</p>
            </div>
        </div>
    </div>
    <div class="menu">
        <div class="layout-positioner">
            <div class="pod">
                <p>Menu</p>
            </div>
        </div>
    </div>
    <div class="promo">
        <div class="layout-positioner">
        	<p class="promo1">Promo1</p>
        	<p class="promo2">Promo2</p>
        </div>
    </div>
    <div class="content">
        <div class="layout-positioner">
            <p class="left">Left</p>
            <p class="main">Main</p>
            <p class="right">Right</p>
        </div>
    </div>
    <div class="footer">
        <div class="layout-positioner">
        	<p>Footer</p>
        </div>
    </div>
</body>


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

		body {
		    width: 450px;
		    height: 335px;
		    font-family: "Arial", sans-serif;
		    font-size: 10px;
		    color: white;
		}
        
        .layout-positioner {
            margin: 0 auto;
            width: 430px;
        }

        .layout-positioner::after {
            display: table;
            content: "";
            clear: both;
        }

        p {
            padding-top: 5px;
            padding-left: 5px;
        } 

		.header,
		.footer,
		.promo {
			background: #34495e;
		}
        
        .header {
            min-height: 50px;
            padding-top: 10px;
        }

		.under {
			background-color: #c0392b;
            width: 350px;
            min-height: 40px;
            float: left;
            margin-left: 40px;
		}

        .header p {
            margin: 0;
        }

        .menu {
            background-color: #3498db;
            min-height: 35px;
        }

        .menu p {
            padding-left: 45px;
            margin: 0;
        }
        
        .promo {
            min-height: 60px;
            padding-top: 5px;
        }

        .promo .promo1 {
            background-color: #c0392b;
            float: left;
            width: 165px;
            min-height: 40px;
            margin-left: 40px;
            margin-top: 5px;
        }

        .promo .promo2 {
            background: #c0392b;
            float: right;
            width: 165px;
            min-height: 40px;
            margin-right: 40px;
            margin-top: 5px;
        }

        .promo p {
            margin: 0;
        }

        .left,
        .right,
        .main {
            float: left;
            background: #3498db;
            margin-right: 10px;
            min-height: 110px;
        }

        .left,
        .right {
            width: 65px;
        }

        .main {
            width: 185px;
        }

        .left {
            margin-left: 40px;
        }

        .right {
            margin-right: 40px;
        }

        .left p,
        .main p,
        .right p {
            margin: 0px;
        }

        .footer {
            min-height: 35px;
            clear: both;
        }

        .footer p {
            padding-left: 50px;
            margin: 0;
        }
9

Ширина центровщика должна быть меньше чем ширина у body. В этом вы правы.
Но давайте посчитаем, сколько px вы отдали автоматическим отступам: (450-430)/2 = 10px справа и слева. А какое расстояние в среднем от левого края body до любого вложенного блока с контентом? В своем первом варианте кода вы писали, что 50px.
Вывод: ширина центровщика выбрана неверно.

10

Во всем разобрался.
Большое спасибо за помощь!)