/*CSS DOCUMENT*/

body {
	font-family: sans-serif;
	line-height: 1.4em;
	color: #222;
	background-color: #fafafa;
	box-sizing: border-box;
	}
	
div.container {
        max-width: 40em;
        margin: 1em;
        padding: 1em;
}

.personal-info ul li {
	display: flex;
	flex-wrap: wrap;
	padding: 1em 0;
}

.personal-info ul li label{
	flex: 0 0 10em;
}

section.personal-info ul li input[type="text"],
section ul li input[type="email"],
section ul li input[type="tel"],
.personal-info ul li select {
	flex: 1 0 20em;
	box-sizing: border-box;
}

.order ul {
	display: flex;
	flex-wrap: wrap;
}

.order ul li {
	flex: 1 0 15em;
}

.method ul {
	display: flex;
	flex-wrap: wrap;
}

.method ul li {
	flex: 1 0 15em;
}

section {
    background: #eee;
    padding: 1em;
    margin-bottom: 1em;
}

section p {
	margin-top: 0;
}

h3{
	margin: 2em 0 0;
}

textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 6em;
	background: #fcfcfc;
	border: 1px solid #e8e8e8;
	padding: 0.4em;
	font-family: sans-serif;
	color: #777;
	}

ul {
	list-style-type: none;
	padding: 0;
}
	

@media only screen and (min-width: 40em) {
	div.container {
		margin: auto;
	}
}

		
/* You want to delete this line to make the media query work. Then you’ll only need one declaration block with one declaration in it. You got it, right? You know how to center the content on the page.