Как сделать input по 50% от блока на одной линии?

Question

[mindx]

У каждого инпута есть отступы, хотя я их сбросил везде где можно, как я понимаю, из-за этих отступов я не могу задать инпутам половину ширину блока, чтоб в сумме они были шириной, как весь блок.
Помогите плз, только учусь ^^
https://codepen.io/Mindx/pen/aEYGgp

Answer 1

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

Проблема из-за того, что браузеры заменяют пробелом перенос строки между inline-block элементами.
Вот статья к которой разбираются способы их устранения https://htmlacademy.ru/blog/21-fighting-the-space-...

Ваш код поправленный одним из способов https://codepen.io/rockoff/pen/jYzKLb

Вы неправильно используете  bootstrap. Посмотрите как делается в официальной документации.
Для адаптивной верстки используйте flex или float.

Comments

[mindx]

Спасибо! И огромное спасибо за замечание, буду исправляться!

Answer 2

[Виктор Таран]

А чем вас не устраивает такой вариант? смысл накручивать ? И смысл использовать на бутстрапе для адаптива флекс и флоат, зачем тогда бутстрап?

<div class="container">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-element">
                    <input type="text" class="form-control" name="name" placeholder="Name">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-element">
                    <input type="email" class="form-control" name="email" placeholder="E-mail">
                  </div>
                </div>
              </div><!-- .row -->
              <div class="form-element">
                <textarea rows="6" class="form-control" name="message" placeholder="Message"></textarea>
              </div>
              <button type="submit" class="btn btn-primary btn-block waves-effect waves-light space-top-none">Send Message</button>
            </div>