Новые блоки появляются сбоку

Question

Как сделать, чтобы новый блок выходил снизу, а не сбоку. Понимаю, что из-за display: flex. Но если убрать, то все блоки появляются внизу(включая header и тп).

body {

    margin: 0;
    font-family: 'Lato', sans-serif;
    color: @black;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

a {
    margin: 0;
}

* {
    box-sizing: border-box;
}

.grey__list {
    padding: 100px 20px 100px 20px;
    background-color: #F0F0F0;
}

.white__list {
    background-color: #fff;
    border-radius: 59px;
    display: flex;
}

.sidebar {
    padding: 60px 40px 40px 50px;
    width: 15%;
    display: flex;
    flex-direction: column;
    border-right: #F8F8F8 2px solid;
}

#sidebar__logo {}

#logo__coin {
    position: absolute;
    margin-left: -110px;
    margin-top: -5px;
}

.sidebar__menu {
    display: flex;
    flex-direction: column;
    margin-top: 80px;
}

.icons {
    width: 30px;
    height: 30px;

}

.sidebar__text {
    display: flex;
    align-items: center;
    color: #C7C7C7;
    padding: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;

}

.sidebar__text:hover {
    color: #197BBD;
    cursor: pointer;
}

.under__part {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 250px;
}

.under__part-text {
    text-align: center;
    font-size: 9px;
    width: 100px;
}

.btn {
    margin-top: 15px;
    padding: 15px 20px;
    background-color: #FFC145;
    border-radius: 14px;
    color: #404040;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;

}

.header {
    padding: 35px 45px 35px 35px;
    width: 100%;
    height: 200px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
}

.header__left {}

#left__title {
    font-size: 43px;
    color: #404040;
}

#left__undertitle {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
    color: #AEAEAE;
}

.header__right {
    display: flex;


}

.right__side {
    display: flex;
}

.user__icons{
    padding: 0 10px;
}

.user {
    display: flex;
}

.user__avatar {
    background-color: #FFC145;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

.user__content {
    display: flex;
    flex-direction: column;
    padding: 0 9px;
}

.user__name {
    font-size: 14px;
    font-weight: 600;
}

.user__account {
    font-size: 14px;
    font-weight: 400;
    color: #AEAEAE;
    width: 100px;
}

.main{
padding: 50px 45px;
}

.center__cards{
background-color: #fff;
    display: flex;
}

.cards__title{
font-size: 20px;
    font-weight: 600;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <!--Sprite-->


    <!--!Sprite-->

    <!--Sidebar-->

    <div class="grey__list">
        <div class="white__list">



            <div class="sidebar">
                <!--Logo-->
                <div id="sidebar__logo"><img src="img/logo.png" alt=""><img id="logo__coin" src="img/logo_coin.svg" alt=""></div>
                <!--Logo-->

                <div class="sidebar__menu">
                    <a class="sidebar__text"><img src="img/1_icon.svg" alt=""> Overview</a>
                    <a class="sidebar__text"><img src="img/2_icon.svg" alt="">Transactions</a>
                    <a class="sidebar__text"><img src="img/3_icon.svg" alt="">Cards</a>
                    <a class="sidebar__text"><img src="img/4_icon.svg" alt=""> Invoices</a>
                    <a class="sidebar__text"><img src="img/5_icon.svg" alt=""> Goals</a>
                    <a class="sidebar__text"><img src="img/6_icon.svg" alt=""> Settings</a>
                </div>

                <div class="under__part">
                    <div><img src="img/under_img.png" alt=""></div>
                    <div class="under__part-text">Give your money
                        awesome space in cloud</div>
                    <a href="" class="btn">Upgrade to premium <img src="img/arrow_up.svg" alt=""></a>
                </div>
            </div>
            <!--Sidebar-->

            <!--Header-->
            <header class="header">
                <div class="header__inner">
                    <div class="header__left">
                        <h2 id="left__title">Weekly sumup</h2>
                        <h3 id="left__undertitle">Get summary of your weekly online transactions here.</h3>
                    </div>
                    <div class="header__right">

                        <a href="#" class="user__icons">
                            <img src="img/mail_right_header.svg" alt="">
                        </a>

                        <a href="#" class="user__icons">
                            <img src="img/bell_header_right.svg" alt="">
                        </a>

                        <div class="user user__icons">
                            <div class="user__avatar">
                                <img src="img/avatar_header_right.svg" alt="">
                            </div>
                            <div class="user__content">
                                <div class="user__name">Andrew</div>
                                <div class="user__account">Admin account</div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!--!Header-->
<br>
            <!--Main-->

            <div class="main">
                <div class="main__inner">
                    <div class="main__center">
                        <div class="center__cards">
                            <div class="cards__inner">
                                <h3 class="cards__title">Cards</h3>
                            </div>
                        </div>
                    </div>

                    <div class="main__right">

                    </div>
                </div>
            </div>
            <!--!Main-->
        </div>
    </div>
</body>

</html>

Answer 1

```<div class="grey__list">
        <div class="white__list">
          <div class="sidebar">
                <!--Logo-->
                <div id="sidebar__logo"><img src="img/logo.png" alt=""><img id="logo__coin" src="img/logo_coin.svg" alt=""></div>
                <!--Logo-->

                <div class="sidebar__menu">
                    <a class="sidebar__text"><img src="img/1_icon.svg" alt=""> Overview</a>
                    <a class="sidebar__text"><img src="img/2_icon.svg" alt="">Transactions</a>
                    <a class="sidebar__text"><img src="img/3_icon.svg" alt="">Cards</a>
                    <a class="sidebar__text"><img src="img/4_icon.svg" alt=""> Invoices</a>
                    <a class="sidebar__text"><img src="img/5_icon.svg" alt=""> Goals</a>
                    <a class="sidebar__text"><img src="img/6_icon.svg" alt=""> Settings</a>
                </div>

                <div class="under__part">
                    <div><img src="img/under_img.png" alt=""></div>
                    <div class="under__part-text">Give your money
                        awesome space in cloud</div>
                    <a href="" class="btn">Upgrade to premium <img src="img/arrow_up.svg" alt=""></a>
                </div>
            </div>
            <!--Sidebar-->

            <div class="wrapper">

            
              <!--Header-->
              <header class="header">
                  <div class="header__inner">
                      <div class="header__left">
                          <h2 id="left__title">Weekly sumup</h2>
                          <h3 id="left__undertitle">Get summary of your weekly online transactions here.</h3>
                      </div>
                      <div class="header__right">

                          <a href="#" class="user__icons">
                              <img src="img/mail_right_header.svg" alt="">
                          </a>

                          <a href="#" class="user__icons">
                              <img src="img/bell_header_right.svg" alt="">
                          </a>

                          <div class="user user__icons">
                              <div class="user__avatar">
                                  <img src="img/avatar_header_right.svg" alt="">
                              </div>
                              <div class="user__content">
                                  <div class="user__name">Andrew</div>
                                  <div class="user__account">Admin account</div>
                              </div>
                          </div>
                      </div>
                  </div>
              </header>
              <!--!Header-->

              <!--Main-->

              <div class="main">
                  <div class="main__inner">
                      <div class="main__center">
                          <div class="center__cards">
                              <div class="cards__inner">
                                  <h3 class="cards__title">Cards</h3>
                              </div>
                          </div>
                      </div>

                      <div class="main__right">

                      </div>
                  </div>
                  
              </div>
              <div class="main">
                  <div class="main__inner">
                      <div class="main__center">
                          <div class="center__cards">
                              <div class="cards__inner">
                                  <h3 class="cards__title">Cards</h3>
                              </div>
                          </div>
                      </div>

                      <div class="main__right">

                      </div>
                  </div>
                  
              </div>
              <!--!Main-->
            </div>
        </div>
      </div>```

БЛОГ НА HUSL

Новые блоки появляются сбоку

Ответы (1 шт):