Почему не действует margin-bottom?

Question

[Иван Пономарёв]

Почему блок с классом slogan выравнивается только при отрицательном значении margin-top:-300px https://codepen.io/ivannotueban/pen/LMborE . А когда пытаюсь через margin-bottom то блок не сдвигается
https://codepen.io/ivannotueban/pen/oJYRQj

Comments

[Владислав Лысков]

потому что margin это отступ и когда ты делаешь margin-bottom он делает отступ снизу, куда он должен при этом сдвинуться?

[dicem]

Вобще само качество верстки оставляет желать лучшего, советую из формы вытащить все кроме полей ввода

[Pavel Karinin]

в версте ошибка в имени класса: <div class="form>">
вынесите элемент с классом .slogan за пределы формы, т.е. из блока .form
затем в простейшем случае:

.from {
    width: 45%;	
    float: left;
}
.slogan {	
    width: 45%;
    float: right;
}

результат тут, а вообще, как сказал dicem, верстка оставляет желать много лучшего

[Иван Пономарёв]

Всем спасибо за ответы.Прошу не судить строго я новичок.

Answer 1

[lagudal]

Еще как действует ))
Видимо вы только учитесь верстать, ошибок и вообще ненужного куча
<div class="form>">
тут лишний тег,
потом, если хотите оставить ваш слоган внутри формы, все что должно быть справа оберните еще одним дивом, и этому диву задайте float:left,
либо, как сказали выше, вывести класс slogan из формы , в классе .form можно оставить, убрать у этого класса width:45% и добавить float:left

float для класса .slogan можно не задавать.
Но вообще надо учиться просто, посмотрите, как верстаются такие формы, их миллион.
Для себя попробуйте следующее.
Прежде чем писать стили, нарисуйте на листке все элементы, в виде блоков, сетки и тд и тп, как вы себе представляете и как оно должно быть. Тогда будет сразу легче, особенно если вы знаете собственно действуют те или иные css-свойства.
И сразу же думайте, как это будет выглядить при других разрешениях.