Input выходит за div, образуя полосу. Как исправить?

Question

[GerudJorgenson]

<div class="main-form">
	<form class="form__user">
		<input class="form-user form-user1" type="text" placeholder="Full Name">
		<input class="form-user form-user2" type="text" placeholder="Email Address">
		<input class="form-user form-user3" type="tel" placeholder="Phone Number"> 
		<button class="form-user__btn" type="submit">Request a quote</button>
	</form>
</div>

form{
	height: 46px;
}
.main-form{
    text-align: center;
}

.main-form input{
	border: none;
	border-radius: 1px;
}

input{
	height: 46px;

}
.form-user {
	
	width: 281px;
	margin-right: 10px;
	padding-left: 41px;
	}

button {	
	border:  2px solid #ffbb42;
	width: 211px;
	height: 46px;
	color: #fff;
	background-color: transparent;  
	border-radius: 1px;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
}

.form-user1 {
	background: url(../images/icon-1.png) no-repeat left center #fff;
	background-position: 15px;
}

.form-user2 {
	background: url(../images/icon-2.png) no-repeat left center #fff;
	background-position: 15px;
	padding:0 0 0 46px;
}
.form-user3 {
	background: url(../images/icon-3.png) no-repeat left center #fff;
	background-position: 15px;
}

Comments

[Ankhena]

Во-первых, это ваш код в песочнице https://jsfiddle.net/soae9t0g/ и это намек.
Во-вторых, не стоит задавать фиксированную высоту блокам.
Особенно если родителю вы задаете 46, а потом в него складываете кнопку высотой 46+2+2. Возможно, у вас где-то там стоит box-sizing, но нам вы об этом забыли рассказать.

=> будет адекватная песочница => будет нормальный ответ.
Позовите, если не разберетесь пока будут её делать.

[GerudJorgenson]

Ankhena, Извините ,я тут новенький ,не грамотно код записал.

https://jsfiddle.net/GerudJorgenson/s5rm9cdg/3/

[Ankhena]

GerudJorgenson,
я песочницу вижу так

[GerudJorgenson]

Ankhena, А может ли отсутствие нормалайза влиять на отображение кода в браузере и в песочнице? Потому что код я скопировал полностью.

[Ankhena]

GerudJorgenson, может
Только в следующий раз проверьте, пожалуйста, что в песочнице все именно так, как вы хотите показать.

[GerudJorgenson]

Ankhena, https://jsfiddle.net/GerudJorgenson/s5rm9cdg/7/

Исправил.

[Ankhena]

GerudJorgenson,
Я всё равно не вижу никакой полосы.

Но могу повторить, не указывайте фикс высоту там, где без неё можно обойтись, в частности для формы.

Разумнее использовать паддинги и line-height для попадания в макет по высоте (если нужно, можно ограничивать высоту, мин, макс). И гриды/флексы, чтобы элементы занимали одинаковую высоту.

[GerudJorgenson]

Ankhena, линию видно если в инспекторе кода навестись на блок с формами(линия выходит за див) ,если в общем и целом, то чисто визуально можно заметить что формы чуть ниже кнопки располагаются.

[Ankhena]

GerudJorgenson, забыли указать vertical-align для инпутов и кнопки
Альтернатива - флексы и гриды для формы

[GerudJorgenson]

Ankhena, Спасибо