html - How can I create a CSS sliding menu? -

i attempted create hamburger menu similar this:

reference: http://tympanus.net/tutorials/responsiveretinareadymenu/

however reason here's got:

here's css:

/*= icon boxes --------------------------------------------------------*/  ul.icon-menu {margin-top:29px;} li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;} li.icon-box.home {background: #e74c3c;} li.icon-box.aboutme {background: #1dd0ad;} li.icon-box.portfolio {background: #3498db;} li.icon-box.blog {background: #f1c40f;} li.icon-box.contact {background: #f39c12;} .icon-box h2{museo500-regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}  .icon-box {display: block;} i.fa {   position:absolute;   pointer-events:none;   color:white ;   margin:20px 0 0 20px }   /*= title boxes --------------------------------------------------------*/ .icon-box.home h2 {       z-index: -999;      position: absolute;       top: 0;       left: 0;       opacity: 0;       background: #e74c3c;       line-height: 120px;       width: 120px;       -webkit-transition:  .3s;     -moz-transition: .5s;     -ms-transition: .5s;     -o-transition: .5s;     transition: .5s;         border-left: 3px solid #a7382d;  }  .icon-box.home a:hover h2 {      opacity: 1; left: 120px; margin: 0;     text-align: center;  }  .icon-box.aboutme h2 {       z-index: -999;      position: absolute;       top: 0;       left: 0;       opacity: 0;       background: #1dd0ad;       line-height: 120px;       width: 120px;       -webkit-transition:  .3s;     -moz-transition: .5s;     -ms-transition: .5s;     -o-transition: .5s;     transition: .5s;     border-left: 3px solid #0d866e; }  .icon-box.aboutme a:hover h2 {      opacity: 1; left: 120px; margin: 0;     text-align: center;  }   .icon-box.portfolio h2 {       z-index: -999;      position: absolute;       top: 0;       left: 0;       opacity: 0;       background: #3498db;       line-height: 120px;       width: 120px;       -webkit-transition:  .3s;     -moz-transition: .5s;     -ms-transition: .5s;     -o-transition: .5s;     transition: .5s;     border-left: 3px solid #2177b1; }  .icon-box.portfolio a:hover h2 {      opacity: 1; left: 120px; margin: 0;     text-align: center;  }   .icon-box.blog h2 {       z-index: -999;      position: absolute;       top: 0;       left: 0;       opacity: 0;       background: #f1c40f;       line-height: 120px;       width: 120px;       -webkit-transition:  .3s;     -moz-transition: .5s;     -ms-transition: .5s;     -o-transition: .5s;     transition: .5s;     border-left: 3px solid #b8960e; }  .icon-box.blog a:hover h2 {      opacity: 1; left: 120px; margin: 0;     text-align: center;  }  .icon-box.contact h2 {       z-index: -999;      position: absolute;       top: 0;       left: 0;       opacity: 0;       background: #f39c12;       line-height: 120px;       width: 120px;       -webkit-transition:  .3s;     -moz-transition: .5s;     -ms-transition: .5s;     -o-transition: .5s;     transition: .5s;     border-left: 3px solid #bc780d; }  .icon-box.contact a:hover h2 {      opacity: 1; left: 120px; margin: 0;     text-align: center;  }    /*= menu icons --------------------------------------------------------*/   span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;} span.icon.home { background-position: 0px 0px;} span.icon.aboutme { background-position: -36px 0px;} span.icon.portfolio { background-position: -72px 0px;} span.icon.blog { background-position: -109px 0px;} span.icon.contact { background-position: -145px 0px;}  .icon-box {     padding: 120px; }  .icon-menu {         border-radius: 50%;         box-shadow: 0 0 0 50px transparent;     padding: 0.2em 0.25em;         background: rgba(255,255,255,0.1);         -webkit-transform: translate3d(0, 0, 0);         -moz-transform: translate3d(0, 0, 0);         -o-transform: translate3d(0, 0, 0);         -ms-transform: translate3d(0, 0, 0);         transform: translate3d(0, 0, 0);         -webkit-transition: box-shadow .6s ease-in-out;         -moz-transition: box-shadow .6s ease-in-out;         -o-transition: box-shadow .6s ease-in-out;         -ms-transition: box-shadow .6s ease-in-out;         transition: box-shadow .6s ease-in-out;     }  .icon-menu li:hover i, .icon-menu li:active i, .icon-menu li:focus {              box-shadow: 0 0 0 0 rgba(255,255,255,0.2);         -webkit-transition: box-shadow .4s ease-in-out;         -moz-transition: box-shadow .4s ease-in-out;         -o-transition: box-shadow .4s ease-in-out;         -ms-transition: box-shadow .4s ease-in-out;         transition: box-shadow .4s ease-in-out; } 

which doesn't good. want link hamburger menu same size. how can perfect hamburger menu here?

jsfiddle: https://jsfiddle.net/xfq0elhu/1/

any idea should work on? please help! i'm stuck!

try may you

<html>    <head>      <style>  @import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");  @import url("http://fonts.googleapis.com/css?family=open+sans:400,300");  @font-face  {  	font-family: museo500-regular;  	src: url('../fonts/museo500-regular.otf');  }      body {background: #f9f9f9; font-family: museo500-regular;}    a{ text-decoration: none; }  h2 {  color: #fff; font-size: 22px; margin: 0 24px;}      /*= icon boxes  --------------------------------------------------------*/    ul.icon-menu {margin-top:29px;}  li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}  li.icon-box.home {background: #e74c3c;}  li.icon-box.aboutme {background: #1dd0ad;}  li.icon-box.portfolio {background: #3498db;}  li.icon-box.blog {background: #f1c40f;}  li.icon-box.contact {background: #f39c12;}  .icon-box h2{museo500-regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}    /*.icon-box {display: block;}*/  i.fa {    position:absolute;    pointer-events:none;    color:white ;    margin:20px 0 0 20px;   margin-top: 17px;      margin-left: -42px !important;  }    .fa {  	margin-left: -44px ;      margin-top: 15px ;  }      /*= title boxes  --------------------------------------------------------*/  .icon-box.home h2 {   	 z-index: -999;  	 position: absolute;   	 top: 0;   	 left: 0;   	 opacity: 0;   	 background: #e74c3c;   	 line-height: 120px;   	 width: 120px;   	 -webkit-transition:  .3s;  	-moz-transition: .5s;  	-ms-transition: .5s;  	-o-transition: .5s;  	transition: .5s;  		border-left: 3px solid #a7382d;  		  }    .icon-box.home a:hover h2 {   	opacity: 1; left: 120px; margin: 0;  	text-align: center;  	  }    .icon-box.aboutme h2 {   	 z-index: -999;  	 position: absolute;   	 top: 0;   	 left: 0;   	 opacity: 0;   	 background: #1dd0ad;   	 line-height: 120px;   	 width: 120px;   	 -webkit-transition:  .3s;  	-moz-transition: .5s;  	-ms-transition: .5s;  	-o-transition: .5s;  	transition: .5s;      border-left: 3px solid #0d866e;  }    .icon-box.aboutme a:hover h2 {   	opacity: 1; left: 120px; margin: 0;  	text-align: center;  	  }      .icon-box.portfolio h2 {   	 z-index: -999;  	 position: absolute;   	 top: 0;   	 left: 0;   	 opacity: 0;   	 background: #3498db;   	 line-height: 120px;   	 width: 120px;   	 -webkit-transition:  .3s;  	-moz-transition: .5s;  	-ms-transition: .5s;  	-o-transition: .5s;  	transition: .5s;  	border-left: 3px solid #2177b1;  }    .icon-box.portfolio a:hover h2 {   	opacity: 1; left: 120px; margin: 0;  	text-align: center;  	   }      .icon-box.blog h2 {   	 z-index: -999;  	 position: absolute;   	 top: 0;   	 left: 0;   	 opacity: 0;   	 background: #f1c40f;   	 line-height: 120px;   	 width: 120px;   	 -webkit-transition:  .3s;  	-moz-transition: .5s;  	-ms-transition: .5s;  	-o-transition: .5s;  	transition: .5s;  	border-left: 3px solid #b8960e;  }    .icon-box.blog a:hover h2 {   	opacity: 1; left: 120px; margin: 0;  	text-align: center;  	   }    .icon-box.contact h2 {   	 z-index: -999;  	 position: absolute;   	 top: 0;   	 left: 0;   	 opacity: 0;   	 background: #f39c12;   	 line-height: 120px;   	 width: 120px;   	 -webkit-transition:  .3s;  	-moz-transition: .5s;  	-ms-transition: .5s;  	-o-transition: .5s;  	transition: .5s;  	border-left: 3px solid #bc780d;  }    .icon-box.contact a:hover h2 {   	opacity: 1; left: 120px; margin: 0;  	text-align: center;  	   }        /*= menu icons  --------------------------------------------------------*/      span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}  span.icon.home { background-position: 0px 0px;}  span.icon.aboutme { background-position: -36px 0px;}  span.icon.portfolio { background-position: -72px 0px;}  span.icon.blog { background-position: -109px 0px;}  span.icon.contact { background-position: -145px 0px;}    .icon-box {      padding: 0 60px;  }  .icon-box:hover {      padding: 120px;  }    .icon-menu {  		border-radius: 50%;  		box-shadow: 0 0 0 50px transparent;      padding: 0.2em 0.25em;  		background: rgba(255,255,255,0.1);  		-webkit-transform: translate3d(0, 0, 0);  		-moz-transform: translate3d(0, 0, 0);  		-o-transform: translate3d(0, 0, 0);  		-ms-transform: translate3d(0, 0, 0);  		transform: translate3d(0, 0, 0);  		-webkit-transition: box-shadow .6s ease-in-out;  		-moz-transition: box-shadow .6s ease-in-out;  		-o-transition: box-shadow .6s ease-in-out;  		-ms-transition: box-shadow .6s ease-in-out;  		transition: box-shadow .6s ease-in-out;  	}    .icon-menu li:hover i,  .icon-menu li:active i,  .icon-menu li:focus {		  		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);  		-webkit-transition: box-shadow .4s ease-in-out;  		-moz-transition: box-shadow .4s ease-in-out;  		-o-transition: box-shadow .4s ease-in-out;  		-ms-transition: box-shadow .4s ease-in-out;  		transition: box-shadow .4s ease-in-out;  }      header{position: relative;}    nav ul{  	display: block;   	flex-wrap: wrap;   	/*max-width: 1080px; */  	margin: 0 auto;		    /* background: #999;*/  }  nav ul,  nav li{  	flex: 1;	  }  nav li:last-child{border-bottom: none;}  nav a{  	text-decoration: none;  	color: inherit;  	display: block;  	font-size: 1.8rem;  }  nav a:hover{  	/*background: #adacac;*/  	color: #fff;  }  nav li{  	position: relative;  	line-height: 50px;  	/*color: #fff;*/  	text-align: center;  }    nav label {      position: absolute;      top: 8px;      left: 20px;      transition: .4s;  }  nav input,  nav label{  	display: none;  	width: 36px;   	height: 36px;   	/*background: #555; */  	color: #fff;   	text-align: center;   	line-height: 36px;  	font-size: 1.6rem;  	border-radius: 4px;  }   nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}  nav label:hover{cursor:pointer;}  nav label:before{  	font-family: fontawesome;  	font-size: 24px;  	content: "\f0c9";  	text-align: center;  }    .nav .navtoogle {      display: none;      width: 100%;      padding: 0.5em 0.5em 0.8em;      font-family: 'lato',calibri,arial,sans-serif;      font-weight: normal;      text-align: left;      color: rgb(7, 16, 15);      font-size: 1.2em;      background: none;      border: none;      border-bottom: 4px solid rgb(221, 221, 221);      cursor: pointer;  }    @media (max-width: 32.438em)  .nav .navtoogle {      margin: 0;      display: block;  }    @media screen , (max-width: 480px){  	nav ul{  		transform: translatey(0);  		box-shadow: 0 0 5px rgba(0,0,0, .7);        transition: .5s;  	  display: block;      padding-top: 56px;  	}  	nav li{  		flex: none;   		width: 100%;  		border-bottom: solid 1px #777;  	}   	nav input[type="checkbox"]:checked + ul{  		transform: translatey(-150%);  		width: 100%;  		background: #999;           transition: .5s;  	}  	nav label{display: block;}    	nav input[type="checkbox"]:checked + ul li:nth-child(1){  		background: #777;   		color: #fff;  	}    }    /***************** fonts ********************/  @import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");  @import url("http://fonts.googleapis.com/css?family=open+sans:400,300");  html{font-size: 62.5%; font-family: 'open sans', sans-serif;}  body{font-size: 1.6rem; min-height: 100vh;}  header{position: relative;}  main{padding: 2rem;}    /***************** navigation ********************/  nav li:last-child{border-bottom: none;}  nav input,  nav label{  	display: none;  	width: 36px;   	height: 36px;   	background: #555;   	color: #fff;   	text-align: center;   	line-height: 36px;  	font-size: 1.6rem;  	border-radius: 4px;  }   nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}  nav label:hover{cursor:pointer;}  nav label:before{  	font-family: fontawesome;  	font-size: 24px;  	content: "\f0c9";  	text-align: center;  }    .mobile {  	    display: none;  }      /*************** media queries *******************/  @media screen , (max-width: 480px){    	ul.icon-menu  	{     margin-top: 15% !important; }  	  	nav li {text-align: left !important;}  li.icon-box  {  	width: 75% !important;  	height: 40px !important; margin-left:10%;  	  }  li.icon-box .fa { margin-left:20px !important;      margin-top: 5px !important;}    .mobile {  	    display: inline;  	padding : 0px;      margin-top: -6px;      font-size: 20px;      font-style: normal;  	    color: #fff;      font-weight: 200;  	line-height: 32px;  }    li.icon-box {  	margin-bottom: 0px !important;  	    border: none;  }  	  	.fa-4x {      font-size: 1.3em !important;  }    .icon-box a:hover h2.nomobile {   display: none !important;	  }    .icon-box a:hover h2.mobile {   display: block !important;	  }  	nav ul{  		transform: translatey(0);  		box-shadow: none !important;        transition: .5s;  	}  	nav li{  		flex: none;  		line-height:40px !important;  		width: 100%;  		border-bottom: solid 1px #777;  	}     	nav input[type="checkbox"]:checked + ul{  		  		width: 100%;  		background: #999;           transition: .5s;  	}  	nav label{display: block;     color: #000 !important; margin-left: 5%;      background: transparent;     margin-top: 15%;}    	nav input[type="checkbox"]:checked + ul li:nth-child(1){  		background: #777;   		color: #fff;  	}    }      </style>      </head>      <body>    	   <div class="container">     <nav>           <input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">            <ul class="main icon-menu">  			<li class="icon-box home">   				<i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">home</h1></a>  				<a href="#">  				      <h2 class="nomobile">home</h2>  					    				</a>  			</li>	  			  			<li class="icon-box aboutme">   				<i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">about me</h1></a>  				    <a href="#">  				      <h2 class="nomobile">about me</h2>  				   </a>  				</li>  				  				  				<li class="icon-box portfolio">           <i class="fa fa-home fa-4x"></i> <a href="#" class="mobile"><h1 class="mobile">portfolio</h1></a>  				     <a href="#">  				         <h2 class="nomobile">portfolio</h2>  				     </a>  				</li>  				  				  			    <li class="icon-box blog">             <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">blog</h1></a>  			         <a href="#">  				          <h2 class="nomobile">blog</h2>  				     </a>  				</li>  				  				  			    <li class="icon-box contact">             <i class="fa fa-home fa-4x"></i><a href="#" class="mobile"><h1 class="mobile">contact</h1></a>  			         <a href="#">  						<h2 class="nomobile">contact</h2>  				       </a>  				</li>    				           </ul>            <label for="css-toggle-menu" id="css-toggle-menu"></label>      </nav>  </div>  	        </body>  </html>