Add this style at the <head> tag (After <title> tag)
<style>
body {
background: #F5F4EF;
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Enabling HTML5 tags */
header, section, footer, aside, nav, article, figure {
display: block;
}
header {
width: 950px;
height: 150px;
margin: 5px auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
nav {
width: 950px;
height: 50px;
margin: 0 auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/***** Hightlight Section *****/
#highlight {
width: 950px;
height: 300px;
margin: 10px auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/***** Content Section *****/
#content {
display: table;
margin: 0 auto;
width: 950px;
}
/***** Left Aside *****/
#left-side {
display: table-cell;
float: left;
width: 450px;
height: 250px;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/***** Right Aside *****/
#right-side {
display: table-cell;
float: right;
width: 450px;
height: 250px;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
/***** Footer *****/
footer {
width: 950px;
height: 50px;
margin: 10px auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
Done. You can fill the web layout with your content
Write by Arafa Daming