Gap / space coming in submenu

Hi,

I have this mega menu which is simple enough, but due to some reason there is some blank space / gap in the submenus on the left side. I tried to use padding:0px and margin:0px but to no avail. Where that gap is coming from ? Please help.

<!DOCTYPE HTML>
<html>
<head>

	<style>
* { margin: auto; box-sizing: border-box; }

.nav, .nav li, .nav a { padding:0; }

.nav a { color: #fff; text-decoration: none; font-family: "tahoma", sans-serif; font-size: 100%; line-height: 2;}
.nav a:hover { color: #ED69A1; text-decoration: none; }

/* NAV TOP LEVEL */

.nav {
	background: #000;
	border-radius: 3px;
	width: 100%;
	margin: auto;
	height: 30px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	z-index:1000;
}

.nav li { list-style: none; padding: 0; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
	float: left;
	color: #fff;
	font-size: 13px;
	letter-spacing:1.25px;
	text-align:left;
	text-decoration: none;
	line-height: 30px;
	padding: 0 8px;
	border-right: 1px solid #777;
	border-left: 1px solid #555;
	height: 30px;
	z-index:1000;
}
.nav > li:hover > a { background: #000; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { display: block; margin:0xp}

/* MEGA DROP DOWN */

.nav > li > div {
	position: absolute;
	top: 30px;
	display: none;
	font-size: 14px;
	letter-spacing:1.25px;
	text-align:left;
	background: rgba(0, 0, 0, 0.7);
	border: 4px solid #ED69A1;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	padding: 10px 10px;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
	overflow: hidden;
	z-index:1000;
}

.nav > li > div p { color: #fff; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; color:#fff; }


/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin:0; float: left; padding:0; }


	/* 1 Column */
	.container-1 { width: 170px;  background: rgba(0, 0, 0, 0.7); }
	.container-1 .col1 { width: 100%; margin:0; padding:0; }

	/* 2 Column */
	.container-2 { width: 320px; background: rgba(0, 0, 0, 0.7); }
	.container-2 .col1 { width: 50% }
	.container-2 .col2 { width: 100% }

	/* 3 Column */
	.container-3 { width: 500px;  background: rgba(0, 0, 0, 0.7);}
	.container-3 .col1 { width: 33.33% }
	.container-3 .col2 { width: 66.66% }
	.container-3 .col3 { width: 100% }


	/* 4 Column */
	.container-4 { width: 600px;  background: rgba(0, 0, 0, 0.7);}
	.container-4 .col1 { width: 25%; }
	.container-4 .col2 { width: 50% }
	.container-4 .col3 { width: 75% }
	.container-4 .col4 { width: 100% }


	/* 5 Column */
	.container-5 { width: 700px;  background: rgba(0, 0, 0, 0.7);}
	.container-5 .col1 { width: 20%; }
	.container-5 .col2 { width: 40% }
	.container-5 .col3 { width: 60% }
	.container-5 .col4 { width: 80% }
	.container-5 .col5 { width: 100% }

	/* HIGHLIGHTS */
	.container-3 .highlighted {
		width: 400px;
		margin-left: -20px;
		padding: 20px;
		background: #e4fbff;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.container-4 .highlighted {
		width: 500px;
		margin-left: -10px;
		padding: 20px;
		background: #e4fbff;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}

	.clearfix:after {
	  content: ".";
	  display: block;
	  height: 0;
	  clear: both;
	  visibility: hidden;
	}
</style>
</head>
	
<body>
<ul class="nav clearfix">
	<li><a href="index.php">Home</a>
		<div class="container-1">
			<div class='col1'><ul>
			<li><a href='showpage.php?pid=1.php'><span>About Us</span></a></li>
			<li><a href='showpage.php?pid=2.php'><span>Delivery & Returns</span></a></li>
				<li><a class="thickbox" href='faq.php'><span>FAQs</span></a></li>
				<li><a class="thickbox" href='testimonial.php'><span>Testimonials</span></a></li>
				<li><a class="thickbox" href='termsofuse.htm'><span>Testimonials</span></a></li>
			</ul></div>
		</div>
	</li>	
			<li><a href="ShowCategoryvi.php?CategoryID=Beauty--2">Beauty </a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Beauty--2&SubcategoryID=Cosmetics-11'>Cosmetics</a></li>
					<li><a href='ShowCategory.php?CategoryID=Beauty--2&SubcategoryID=False-Lashes-12'>False Lashes</a></li>
					<li><a href='ShowCategory.php?CategoryID=Beauty--2&SubcategoryID=Manicure-13'>Manicure</a></li>
					<li><a href='ShowCategory.php?CategoryID=Beauty--2&SubcategoryID=Nail-Art-and-Wraps-14'>Nail Art and Wraps</a></li>
					<li><a href='ShowCategory.php?CategoryID=Beauty--2&SubcategoryID=Skincare-15'>Skincare</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Clearance-5">Clearance</a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Clearance-5&SubcategoryID=Beauty-Stock-2'>Beauty Stock</a></li>
					<li><a href='ShowCategory.php?CategoryID=Clearance-5&SubcategoryID=Hair-Stock-1'>Hair Stock</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Electrical-Styling-7">Electrical Styling</a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Electrical-Styling-7&SubcategoryID=Heated-Rollers-21'>Heated Rollers</a></li>
					<li><a href='ShowCategory.php?CategoryID=Electrical-Styling-7&SubcategoryID=Straighteners-22'>Straighteners</a></li>
					<li><a href='ShowCategory.php?CategoryID=Electrical-Styling-7&SubcategoryID=Stylers-and-Hot-brushes-23'>Stylers and Hot brushes</a></li>
					<li><a href='ShowCategory.php?CategoryID=Electrical-Styling-7&SubcategoryID=Tongs-24'>Tongs</a></li>
					<li><a href='ShowCategory.php?CategoryID=Electrical-Styling-7&SubcategoryID=Wands-25'>Wands</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Equipment-6">Equipment</a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Equipment-6&SubcategoryID=Epilators-19'>Epilators</a></li>
					<li><a href='ShowCategory.php?CategoryID=Equipment-6&SubcategoryID=Facial-Steamers-18'>Facial Steamers</a></li>
					<li><a href='ShowCategory.php?CategoryID=Equipment-6&SubcategoryID=Hairdryers-16'>Hairdryers</a></li>
					<li><a href='ShowCategory.php?CategoryID=Equipment-6&SubcategoryID=Hood-Dryers-and-Processors-17'>Hood Dryers and Processors</a></li>
					<li><a href='ShowCategory.php?CategoryID=Equipment-6&SubcategoryID=Spray-Tanning-Machines-20'>Spray Tanning Machines</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Hair-1">Hair</a>
				<div class="container-2">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Bags-and-Holdalls-3'>Bags and Holdalls</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Barbering-Tools-4'>Barbering Tools</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Brushes-8'>Brushes</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Clip-ins-29'>Clip-ins</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Clippers-and-Trimmers-7'>Clippers and Trimmers</a></li>
				</ul></div>
	<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Combs-6'>Combs</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Foils-and-Meche-10'>Foils and Meche</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Hair-Care-and-Styling-9'>Hair Care and Styling</a></li>
					<li><a href='ShowCategory.php?CategoryID=Hair-1&SubcategoryID=Razors-and-Blades-5'>Razors and Blades</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Offers-4">Offers</a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Offers-4&SubcategoryID=Reductions-26'>Reductions</a></li>
				</ul></div>
			</div>
				</li>
			<li><a href="ShowCategoryvi.php?CategoryID=Students-3">Students</a>
				<div class="container-1">
				<div class='col1'><ul>
					<li><a href='ShowCategory.php?CategoryID=Students-3&SubcategoryID=Beauty-Essentials-27'>Beauty Essentials</a></li>
					<li><a href='ShowCategory.php?CategoryID=Students-3&SubcategoryID=Hair-Essentials-28'>Hair Essentials</a></li>
				</ul></div>
			</div>
				</li>
		
<li><a class="jTip" href="minicart.php" id="tipMiniCart" name="What's in my Basket?" onClick="location.href='cart.php'"><span>Your Order</span></a></li>
			<li><a href='checkout.php'><span>Checkout</span></a></li>
			<li><a href='contactus.php'><span>Contact Us</span></a></li>
	
	
</ul>
</body>
</html>

Thanks.

you are targeting child ULs in the drop down , so what you need is to add:

.nav ul { padding:0; margin:0; }

Hi,

Very weird of me, dunno how I missed that.

Very Thanks.