Накладывается один элемент на другой

Слайдеры накладываются на форму. Код css слайдера:

.slider{
  padding-top: 10%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  height: 30%;
  width: 40%;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
  border-bottom: 2px solid silver;
  align-content: center;
}

Код css формы:

#form_input {
  float: left;
  margin-top: 15px;
  font-size: 1.1em;
}

Помогите, пожалуйста! Не понимаю как это работает... При написании у слайдера float: left; выглядит вот так: