/*CSS DOCUMENT*/

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

/* I have *some* selectors with their declarations in the declaration block. You’ll need more selectors and declaration blocks. */

h1{
	margin: 1.5em 0 1em 0;
}

h2{
	margin: 1em 0 -.5em 0;
}

section.personal-info ul li{
	display: flex;
	flex-wrap: wrap;
}

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

section.personal-info ul li label{
	flex: .5 0 5em;
	margin: 1em 1em .25em .25em;
}

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

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

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

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

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

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

section p {
	margin-top: -1em;
}

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

/* 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.*/
@media only screen and (min-width: 40em) {

  div.container {
    margin: auto;
  }

}