Почему, если вкладываю элементы button в form, то кнопки съезжают?

Question

[Raul Abdullin]

Вообщем вложил каждую кнопку в form, и кнопки почему-то разъехались, как показано в скрине номер 1.
При этом пробовал без form кнопки использовать, на больших экранах отображается нормально, а на мобильных вторая кнопка так же съезжает (скрин номер 2).

Скрин номер 1:


Скрин номер 2:


Хтмл Код:

<div class="presentation">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
							<h3 class="near-titles">About Company</h3>
							<h2>
								Guarantee the prompt<br> and reliable transportation<br> of your goods.
							</h2>
							<button>Container</button>
							<button class="second-btn">Box</button>
					</div>
				</div>
			</div>
		</div>

Comments

[Сергей Мурзин]

Bootstrap? :)

Точно не помню, но попробуйте дать обеим кнопкам класс "btn".

Но лучше всего перечитать учебники по CSS и HTML, а также использовать инспектор

[Антон Спирин]

Без вашего css вам только медиум поможет.
Сбросьте свой код в codepen или jsfiddle.

[Raul Abdullin]

Антон Спирин, сделано https://jsfiddle.net/L1271abb/ версткаю с использованием сетки бутстрапа

[FabiBoom]

margin-left уберите))

[Raul Abdullin]

FabiBoom, ?

[Антон Спирин]

raulvodov, срочно изучите основы верстки. Это не долго. Могу посоветовать книгу Новая Большая Книга CSS. Вы сделали отступ между кнопками и отступ для мобильных, добавив margin-top и margin-left:

.presentation button.second-btn {
    background-color: #438AFA;
    background-image: linear-gradient(to right, #37A1F6, #438AFA);
    margin-left: 26px; // из-за этого кнопка и съезжает
    margin-top: 39px;
}

Это очень плохой стиль и делать так неправильно.

[Raul Abdullin]

Антон Спирин, я недавно прочитал эту книгу и верстаю один из первых сайтов, спасибо я уже с этим разобрался

[Антон Спирин]

raulvodov, я бы вам посоветовал. Сначала использовать встроенные кнопки Bootstrap, стилизовав их под свои нужды. Пока работаете с Bootstrap не просто пользуйтесь им, а изучайте его исходный код. Хорошо развивает на начальных порах.

[Raul Abdullin]

Антон Спирин, я из бутстрапа только сетку взял, всё остальное убрал

[Антон Спирин]

raulvodov, ну тогда смотрите как похожие задачи решены на других сайтах, тоже развивает.
Еще для вашей проблемы, как бы вы ее не решили, оптимальным решением будет использование медиазапроса.

Answer 1

[Jaroslaw Goszowski]

Если я правильно понял, у тебя одна кнопка в форме, а вторая нет (на примере вообще форма отстутствует).
Слейдай форме display: inline;