#container{ background-color:red; width:900px; margin:0 auto}
/* Style the menu icon */
.icon {
	color: white;
	font-size: 22px;
}

/* Remove the input field from the labels */
.icon, [id^=drop1], [id^=drop2] {
 display: none;
}

/* Hide the level 2 dropdown and position relative to the nearest positioned ancestor */
ul.level1 ul {
 display: none;
 position: absolute;
}

/* Remove margins and padding from the list, and add a black background colour */
ul.level1, ul.level1 li ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
 /* Set background of navigation */
nav{	background-color: #333;}

/* Float the list items side by side */
ul.level1 li {	float: left;}

/* Style the links and label inside the list items */
ul.level1 li a, .menuitem {
    display: inline-block; /* inline-block elements are like inline elements but they can have a width and a height */
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change background colour of links on hover */
ul.level1 li a:hover, ul.level1 li ul :hover {background-color: #111;}
	
/* Hide the menu icon item that contains the link that should open and close the level1 on small screens */
ul.level1 li.icon {display: none;}

/* Display and style level 2 list items */
ul.level2 li{
	display: list-item;
	position: relative;
	width: 170px;
	background-color: #333;
	float: none;
}

/* Display line between dropdown list items */
nav li {
	border-bottom: 1px ridge gray;
}

/* Displays the level 2 menu when hover over item*/
ul.level1 li:hover > ul { display: inherit; }

/* --------------------------------------------------- */
	
/* Settings for screen is less than 680 pixels wide */
@media screen and (max-width:680px) {
	/* Hide the menu items */
	ul.level1 li  {display: none;}

	/* Position dropdown menu in flow position */
	ul.level1 ul {position: static;}
	
	/* Cancel the hover and display */
	ul.level1 li:hover > ul {display: none;}
	
	/* Display level 1 dropdown menu when icon clicked */
	[id^=drop1]:checked + ul.level1 li{display: block;}

	/* Display level 2 dropdown menu when item clicked */
	[id^=drop2]:checked + ul.level2 {display: block;}

	/* Display the menu icon */
	.icon {
		display: block;
		padding: 0 20px;
		color: #FFF;
		font-size: 20px;
		line-height: 60px;
	}

	/* Set background hover colour */
	.icon:hover, nav li:hover { background-color: #111; }

	/* Set properties of list items */
	nav li {
		display: block;
		width: 100%;
	}
}
	

#method
text-align:center