Проблемы с float

$( document ).ready(function() { 
/*focus*/ 
/*placeholder*/ 
 
$("input").focus(function(){ 
	$(this).parent().children(".label").animate({"margin-top": "-20px"}, 300); 
	$(this).animate({"padding-top": "0px"}, 300); 
}) 
 
$("input").focusout(function(){ 
	$(this).parent().children(".label").animate({"margin-top": "0px"}, 300); 
	$(this).animate({"padding-top": "14px"}, 300); 
 
}); 
/*animate description*/ 
 
$("#f-phone, #f-email").children("input").focus(function(){ 
		$(this).parent().parent().children(".i-descr").slideDown(); 
}); 
 
$("#f-phone, #f-email").children("input").focusout(function(){ 
		$(this).parent().parent().children(".i-descr").slideUp(); 
}); 
 
});

@import url('https://fonts.googleapis.com/css?family=Changa+One:400i'); 
@import url('https://fonts.googleapis.com/css?family=Fira+Sans'); 
 
.sect-input select,.sect-input input:active, .sect-input input:focus { 
	outline: none; 
} 
 
.container{ 
	padding-bottom: 70px; 
} 
 
.clr:after { 
  content: ""; 
  display: table; 
  clear: both; 
} 
 
.container{ 
	position: relative; 
	width: 900px; 
	min-height: 600px; 
	margin: 0 auto; 
	border: 1px solid black; 
	background-color: #ccc; 
} 
.form{ 
	position: absolute; 
	left: calc(50% - 250px); 
	top: 70px; 
	width: 530px; 
	margin: 0 auto; 
	min-height: 200px; 
	border-radius: 7px; 
	background-color: #fff; 
	overflow: hidden; 
	z-index: 1; 
} 
 
.f-header{ 
	font-family: 'Changa One', cursive; 
	position: relative; 
	background-color: #0072BC; 
	color: #fff; 
	padding: 15px; 
	font-size: 16px; 
} 
 
.f-close{ 
	cursor: pointer; 
	position: absolute; 
	top: 50%; 
	margin-top: -5px; 
	right: 20px; 
	width: 10px; 
	height: 10px; 
	background: url(http://myfrelance.ho.ua/images/f-close.png 
) no-repeat; 
	-webkit-background-size: contain; 
	background-size: contain; 
	display: inline-block; 
} 
 
.f-steps{ 
	position: relative; 
	top: -6px; 
	text-align: center; 
	font-size: 14px; 
	font-weight: 200; 
	color: #0072BC; 
} 
.f-step{ 
	display: inline-block; 
	text-align: center; 
	margin-left: 10px; 
	width: 90px; 
} 
.f-step:first-child{ 
	margin-left: 0px; 
} 
.f-steps span{ 
	display: block; 
	position: relative; 
	left: 50%; 
	margin-left: -5px; 
	margin-bottom: 5px; 
	width: 12px; 
	height: 12px; 
	border: 1px solid #0072BC; 
	border-radius: 50%; 
	background-color: #fff; 
} 
span.step-active{ 
	background-color: #0072BC; 
	box-shadow: inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff,inset 0 0 2px #fff; 
} 
 
.f-content{ 
	padding: 24px; 
	font-size: 12px; 
	font-family: 'Fira Sans', sans-serif; 
} 
.f-description{ 
	margin-bottom: 20px; 
	color: #949494; 
} 
 
.sect-input{ 
	position: relative; 
	width: 230px; 
	height: 40px; 
	margin-bottom: 20px; 
	box-sizing: border-box; 
	border: 1px solid #949494; 
	border-radius: 3px; 
} 
 
.sect-input select{ 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	border:none; 
	background: none; 
	appearance: none;  
	-webkit-appearance: none;  
	-o-appearance: none; 
	-moz-appearance: none; 
	-ms-appearance: none; 
	padding: 5px; 
	padding-top: 19px; 
	padding-left: 10px; 
	color: #949494; 
} 
 
.sect-input input{ 
	box-sizing: border-box; 
	color: #949494; 
	padding-top: 14px; 
	padding-left: 9px; 
	background: none; 
	border: none; 
	margin: 0; 
	height: 100%; 
	width: 100%; 
} 
 
.sect-input .label{ 
	padding: 5px; 
	padding-left: 10px; 
	position: absolute; 
	color: #0072BC; 
	font-weight: bold; 
	z-index: -1; 
} 
 
/* ARROW*/ 
.arrow{ 
	border-left: 1px solid #949494; 
	position: absolute; 
	height: 38px; 
	top: 0px; 
	right: 10px; 
	padding-left: 10px; 
	z-index: -1; 
} 
.arrow-down { 
	margin-top: 16px; 
	width: 0;  
	height: 0;  
	border-left: 11px solid transparent; 
	border-right: 11px solid transparent; 
	border-top: 11px solid #0072BC; 
} 
.f-input-item{ 
	float: left; 
	width: 230px; 
} 
 
.f-input-item:nth-of-type(even){ 
	margin-left: 20px; 
} 
.f-input-item:nth-child(2){ 
	float: none; 
	margin-left: 0px; 
} 
 
.i-descr{ 
	margin-top: 10px; 
	color:#0072BC; 
	display: inline-block; 
	margin-bottom: 10px; 
	padding: 1px; 
	width: 100%; 
	display: none; 
} 
 
.f-bottom-content{ 
	 
}

<div class="container"> 
 
	<div class="form clr"> 
		<div class="f-header">Contact form <div class="f-close"></div></div> 
		<div class="f-steps"> 
				<div class="f-step"><span class="step-active"></span>You</div> 
				<div class="f-step"><span></span>Outbound party</div> 
				<div class="f-step"><span></span>Return party</div> 
		</div> 
		<div class="f-content clr"> 
			<div class="f-description"> 
				Description why is it needed, so the user feels encouraged, not discourages by the length of the step 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Title</div> 
					<select name="Title" value=""> 
						<option value="Mr">Mr</option> 
						<option value="Mis">Mis</option> 
					</select> 
					<div class="arrow"> 
						<div class="arrow-down"></div> 
					</div> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Name</div> 
					<input type="text" name="" placeholder="e.g. John" value=""></input> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Surname</div> 
					<input type="text" name="" placeholder="e.g. Doe" value=""></input> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Street</div> 
					<input type="text" name="" placeholder="e.g. Baker Street 221B" value=""></input> 
				</div> 
			</div> 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Postal code</div> 
					<input type="text" name="" placeholder="e.g. 012345" value=""></input> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">City</div> 
					<input type="text" name="" placeholder="e.g. Berlin" value=""></input> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div class="sect-input"> 
					<div class="label">Country</div> 
					<select name="Title" value=""> 
						<option value="Mr">Germany</option> 
						<option value="Mis">England</option> 
					</select> 
					<div class="arrow"> 
						<div class="arrow-down"></div> 
					</div> 
				</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div id="f-phone" class="sect-input"> 
					<div class="label">Mobile number</div> 
					<input type="text" name="" placeholder="e.g. Berlin" value=""></input> 
				</div> 
				<div class="i-descr">Leave your phone number so we can contact you in a case of any ...</div> 
			</div> 
 
			<div class="f-input-item"> 
				<div id="f-email" class="sect-input"> 
					<div class="label">Email</div> 
					<input type="email" name="" placeholder="e.g. john@doe.com" value=""></input> 
				</div> 
				<div class="i-descr">We will send you confirmation on this email.If you choose to register, your e-mail is your login.</div> 
			</div> 
		</div> 
		<div class="f-bottom-content"></div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>