CSS FLEX, как убрать отступы у главного контейнера?

Question

[usedtoknow]

Всем привет!

Только учусь писать сайты, и наткнулся на такую проблему:

Я засунул в один контейнер контент и сайд бар, и ему задал свойство флекс:

.container {
width: 100%;
padding-top:10px;
padding-bottom: 10px;
display: flex;
}

.content {
background-color: #fff;
width: 690px;
min-width: 600px;

margin-right: 10px;
word-wrap: break-word;
}

.sidebar {
max-width: 300px;
background-color: yellow;
}

т.к. я хочу, чтобы мой сайдбар содержал окно авторизации, а дальше кнопку добавления записи (а-ля "Пикабу"), то его расскрасил под цвет фона, а окно авторизации - белым, но вот незадача - окно авторизации теперь стоит ниже контента, тогда как поля сайдбара стоят как мне нужно.

Работает замечательно через свойство "margin-top:-16px" у окна авторизации, но мне кажется, что есть еще способ убрать поля сайдбара (окрашен в желтый цвет)



UPD: попробовал с контентом: теперь контент стоит ниже, чем авторизация))

ССЫЛКА НА КОД

Comments

[tyzberd]

добавьте на https://jsfiddle.net или https://codepen.io/

[usedtoknow]

tyzberd, https://jsfiddle.net/L4n5jvx2/

теперь проблема с контентом, он стоит ниже, чем авторизация)))

[tyzberd]

у р, h1 по дефолту есть margin
еще так как авторизация в одну строку, можно задать line-height: 1; тоже немного отступ уменьшится
<br> тоже отступ добавляет

[tyzberd]

https://jsfiddle.net/L4n5jvx2/3/
только через свои классы сделайте

[usedtoknow]

tyzberd, спасибо большое!!!

[usedtoknow]

tyzberd, в принципе, особо ошибок не было, надо запомнить только, что заголовки и сверху делают марджин))

Answer 1

[Марти Макфлай]

.text_box h1 {
    margin-top: 0;
}