HTML5 and CSS3-Framework Layout

HTML Script:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>simple web site layout using media query</title>
<link href="simplelalyout-framework-mediaquery.css" rel="stylesheet">
</head>

<body>
<header>
    <div class="row">
    <div class="frame-12">
    <h1>Welcome to Header Section</h1>
    </div>
    </div>
</header>


<nav>
    <div class="row">
       
        <div class="frame-2"><span>HOME</span></div>
        <div class="frame-2"><span>ABOUT US</span></div>
        <div class="frame-2"><span>SERVICES</span></div>
        <div class="frame-2"><span>CAREER</span></div>
        <div class="frame-2"><span>GALLERY</span></div>
        <div class="frame-2"><span>CONTACT</span></div>


 </div>      
       
</nav>

<div id="banner"></div>

<div class="row">
    <div class="frame-9">
    <article></article>
    <article></article>
    </div>
    <div class="frame-3">
    <aside></aside>
    <aside></aside>
    <aside></aside>
        <aside></aside>
    <aside></aside>
    </div>
</div>

<footer></footer>

</body>
</html>

CSS3 -

*{
border:0px;
padding:0px;
margin:0px;
   
}
header,nav,#banner,article,aside, footer {
   
box-shadow:#999 0px 5px 10px;
margin-bottom:10px;       
}
nav {
    position:relative;
    min-height:40px;
}
ul {
position:absolute;
left:0px;
top:0px;
}
ul li {
float:left;   
padding-left:8.3333px;
padding-right:8.3333px;
}
body {

background:url(bgpattern.png);
background-size:5px;
width:80%;
margin-left:auto;
margin-right:auto;   
}
header {
background:#CCC;
height:100px;
border-radius:10px;
line-height:100px;
text-align:center;

}

aside {
background:#696;
height:250px;
width:100%;
border-radius:10px;
text-align:center;
}
nav {
background:#C60;
height:40px;
border-radius:10px;
text-align:center;
}

#banner {
background:#CCC;
height:350px;
border-radius:10px;
line-height:100px;
text-align:center;

}
footer {
background:#CCC;
height:50px;
border-radius:10px;
text-align:center;
clear:both;
}
article {
background:#F93;
min-height:500px;
border-radius:10px;
line-height:100px;
text-align:center;
width:95%;   
}
.row {
margin:0px 0px;   
}
.frame-12, .frame-11, .frame-10, .frame-9, .frame-8, .frame-7, .frame-6, .frame-5, .frame-4, .frame-3, .frame-2, .frame-1 {
float:left;
text-align:center;   
}

span {
line-height:40px;   
}

.frame-12 {
    width: 100%;
  }
  .frame-11 {
    width: 91.66666667%;
  }
  .frame-10 {
    width: 83.33333333%;
  }
  .frame-9 {
    width: 75%;
  }
  .frame-8 {
    width: 66.66666667%;
  }
  .frame-7 {
    width: 58.33333333%;
  }
  .frame-6 {
    width: 50%;
  }
  .frame-5 {
    width: 41.66666667%;
  }
  .frame-4 {
    width: 33.33333333%;
  }
  .frame-3 {
    width: 25%;
  }
  .frame-2 {
    width: 16.66666667%;
  }
  .frame-1 {
    width: 8.33333333%;
  }

@media(max-width:780px){
   
.frame-12, .frame-11, .frame-10, .frame-9, .frame-8, .frame-7, .frame-6, .frame-5, .frame-4, .frame-3, .frame-2, .frame-1 {
width:100%;   
}

nav {
min-height:240px;   
}
article {
width:100%;   
}
header h1 {
    font-size:14px;
}
}
@media(max-width:380px){
   
.frame-12, .frame-11, .frame-10, .frame-9, .frame-8, .frame-7, .frame-6, .frame-5, .frame-4, .frame-3, .frame-2, .frame-1 {
width:100%;   
}

nav {
min-height:240px;   
}
article {
width:100%;   
}
header h1 {
    font-size:14px;
}
}