*{box-sizing: border-box;} /*width: 50px width: 20% % is relational to parent container

...

*/ header { height: 200px; padding: 20px; text-align: center; } nav ul { list-style-type: none; background-color: yellow; text-align: center; padding: 20px; margin: 0px; } nav ul li { display: inline; } nav ul li a { line-height:25px; color: blue; text-decoration: none; } nav ul li a:hover { background-color: red; } .row:after { display: table; content: ""; clear: both; } .left { float: left; width: 60%; padding: 5px 20px 5px 20px; background-color: lime; } .right { float: right; width: 40%; padding: 5px 20px 5px 20px; background-color: orange; } footer { padding: 20px; background-color: violet; }