html tag conflict and

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="[[++modx_charset]]">
  <title>[[++site_name]] - [[*longtitle]]</title>
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta name="description" content="[[*description]]">
  <base href="[[++site_url]]">
  <link  href="http://fonts.googleapis.com/css?family=Oswald:regular" rel="stylesheet" type="text/css" >
  <link href='http://fonts.googleapis.com/css?family=Junge' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="assets/templates/itfits/css/style.css">
  <link rel="stylesheet" href="assets/templates/itfits/fonts/raphaelicons.css">
  <link rel="stylesheet" href="assets/templates/itfits/css/main.css">
</head>
<body>
  <header class="clearfix">
      <div class="container">
        <a id="logo" href="[[++site_url]]">[[++site_name]]</a>
        <ul class="social-icons">
          <li><a href="http://www.facebook.com/blog.cssjuntion" class="icon flip">^</a></li>
          <li><a href="" class="icon">T</a></li>
          <li><a href="http://www.twitter.com/cssjunction" class="icon">^</a></li>
        </ul>
        <nav class="clearfix">
          [[Wayfinder? &startId=`0` &level=`1` &outerTpl=`@CODE: <ul role="navigation">[[+wf.wrapper]]</ul>`]]
        </nav>
      </div>
  </header>
   <section role="banner">
       <hgroup>
           <h1>[[*pagetitle]]</h1>
           <h2>[[*longtitle]]</h2>
       </hgroup>
       <article role="main" class="clearfix">
           <div class="post">
             <h2>[[*pagetitle]]</h2>
             [[*content]]
           </div>
           <aside role="complementary">
            [[*introtext]]
           </aside>
       </article>
   </section> <!-- // banner ends -->
   <section class="container">
       <div class="columns">
           [[getImageList? &tvname=`homeBlocksTV` &tpl=`homeBlocksTpl`]]
       </div> <!-- //.columns -->
       <ul class="thumb-rotator">
         <li>Templates will be listed here.</li>
       </ul>
   </section>
  <footer role="contentinfo">
      [[$footer]]
  </footer>
  <script src="assets/js/jquery-1.9.0.min.js"></script>
  <script src="assets/js/easySlider1.7.js"></script>
  <script>
    $(document).ready(function(){  
	    $("#slider").easySlider({
		    auto: true,
		    continuous: true,
        controlsShow: false
	    });
    });
  </script>
</body>
</html>

section[role=banner] article[role=main] aside {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  float: right;
  overflow: hidden;
  width: 40%;
  position: relative;
  border: 3px solid rgba(0, 0, 0, 0.03);
  padding: 2px;
}
/*section[role=banner] article[role=main] aside:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.15);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.6)), color-stop(50%, rgba(255, 255, 255, 0.15)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
  -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 0 rgba(0, 0, 0, 0.3), inset 0 -7px 0 rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 0 rgba(0, 0, 0, 0.3), inset 0 -7px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 0 rgba(0, 0, 0, 0.3), inset 0 -7px 0 rgba(255, 255, 255, 0.2);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}*/
section[role=banner] article[role=main] aside img {
  width: 100%;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
section[role=banner] article[role=main] aside p {
	text-align: center;
}
#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:40%x;
		height:260px;
		overflow:hidden;
		margin-left:-7px; 
		}
section[role=banner] article[role=main] aside h2 {
	text-align: center;
}