How to align elements on the page?

Question

Hello, I’m beginner in HTML and CSS, I’m learning by hobby to develop themes for social network Tumblr, I’m making this layout for test purposes as I did draft in Photoshop:

Only when coding it, the area of the sidebar and the posting are deregulated and I’ve tried in every way to align them, but I can’t, what am I doing wrong? There my codes and the Tumblr link I am developing the layout.

         /*Corpo da Página*/
            
            body {
                background: url("https://i.imgur.com/ujnC90p.png") no-repeat fixed;
                font-family: 'Open Sans Condensed', sans-serif;
                font-size: 15px;
                text-align: justify;
                color: #7db1a5;
            }
            
            /*Caixa*/
            
            #conteiner {
                display: flex;
                justify-content: center;
            }
            
            /*Conteúdo*/
            
            .content {
                display: flex;
                justify-content: center;
                width: 810px;
                background: #f3edcd;
                margin-top: 45px;
                margin-bottom: 40px;
            }
            
            /*Cabeçalho*/
            
            .header {
                width: 1000px;
                height: 1000px;
                background: url("https://i.imgur.com/gpaEEDj.png") no-repeat scroll;
                margin: 10px;
            }
            
            .entry {
                display: flex;
                flex-direction: row;
            }

            /*Barra Lateral*/
            
            .sidebar {
                width: 131px;
                height: 121px;
                background: red;
                margin-top: 10px;
                margin-right: 10px;
                padding: 10px;
            }
            
            /*Faixa*/
            
            .ribbon {
                margin-top: -10px;
                margin-left: -16px;
            }
            
            /*Postagem*/
            
            .post {
                width: 400px;
                background: transparent;
                margin-top: 150px;
                margin-bottom: 10px;
                padding: 10px;
            }
            
            
            /*Título*/
            
            .title {
                font-size: 20px;
                text-align: center;
                color: #f2d377;
                padding: 5px;
            }

 <!-- Div de Caixa -->
        
        <div id="conteiner">
            
            <!-- Div de Conteúdo -->
            
            <div class="content">
                
                <!-- Div de Cabeçalho -->
                
                <div class="header">
                    
                    <!-- Div de Logotipo -->
                    
                    <div class="logo">
                        
                        <img src="https://i.imgur.com/J3ME7rw.png">
                        
                    </div>
                    
                    <!-- Fim da Div de Logotipo -->
                    
                </div>
                
                <!-- Fim da Div de Cabeçalho -->
                
                <!-- Div de Acesso --> 
                
                <div class="entry">
                    
                    <!-- Div de Barra Lateral -->
                    
                    <div class="sidebar">
                        
                        <!-- Div de Faixa --> 
                        
                        <div class="ribbon"></div>
                        
                    </div>
                    
                    <!-- Fim da Div de Barra Lateral -->
                    
                    <!-- Div de Postagem --> 
                    
                    <div class="post">
                        
                        <!-- Block de Postagem -->
                        
                        {block:Posts}
                        
                        <!-- Block de Texto -->
                        
                        {block:Text}
                        
                        <!-- Div de Título -->
                        
                        <div class="title">
                            
                            {Title}
                            
                        </div>
                        
                        {Body}
                        
                        {/block:Text}
                        
                        {/block:Posts}
                        
                    </div>
                    
                </div>
                
                <!-- Fim da Div de Acesso -->
                
            </div>
            
            <!-- Fim da Div de conteúdo -->
            
        </div>
        
        <!-- Fim da Div de Caixa -->

The Tumblr: http://stripestheme.tumblr.com

Answer 1

    <div id="conteiner">

        <!-- Div de Conteúdo -->

        <div class="content">

            <!-- Div de Cabeçalho -->

            <div class="header">

                <!-- Div de Logotipo -->

                <div class="logo">

                    <img src="https://i.imgur.com/J3ME7rw.png">

                </div>

                <!-- Fim da Div de Logotipo -->

            </div>

            <!-- Fim da Div de Cabeçalho -->

            <!-- Div de Acesso --> 

            <div class="entry">

                <!-- Div de Barra Lateral -->

                <div class="sidebar">

                    <!-- Div de Faixa --> 

                    <div class="ribbon"></div>

                </div>

                <!-- Fim da Div de Barra Lateral -->

                <!-- Div de Postagem --> 

                <div class="post">

                    <!-- Block de Postagem -->

                    {block:Posts}

                    <!-- Block de Texto -->

                    {block:Text}

                    <!-- Div de Título -->

                    <div class="title">

                        {Title}

                    </div>

                    {Body}

                    {/block:Text}

                    {/block:Posts}

                </div>

            </div>

            <!-- Fim da Div de Acesso -->

        </div>

        <!-- Fim da Div de conteúdo -->

    </div>

    <!-- Fim da Div de Caixa -->

Answer 2

Hello, I made some adjustments to css just to align correctly the way you want.

<style>
    /*Corpo da Página*/            
    body {
        background: url("https://i.imgur.com/ujnC90p.png") repeat;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 15px;
        text-align: justify;
        color: #7db1a5;
    }

    /*Caixa*/

    #conteiner {
        display: flex;
        justify-content: center;
    }

    /*Conteúdo*/

    .content {
        width: 810px;
        background: #f3edcd;
        margin-top: 45px;
        margin-bottom: 40px;
    }

    /*Cabeçalho*/

    .header {
        width: calc(100% - 20px);
        background: url("https://i.imgur.com/gpaEEDj.png") no-repeat;
        margin: 10px;
        padding:20px 0;
        text-align:center;
    }


    .entry {
        display: flex;
        flex-direction: row;

    }

    /*Barra Lateral*/

    .sidebar {
        width: 131px;
        height: 121px;
        background: red;
        margin-right: 10px;
        padding: 10px;
    }

    /*Faixa*/

    .ribbon {
        margin-top: -10px;
        margin-left: -16px;
    }

    /*Postagem*/

    .post {
        flex-grow:1;
        background: #00f;
        margin-bottom: 10px;
        padding: 10px;
    }


    /*Título*/

    .title {
        font-size: 20px;
        text-align: center;
        color: #f2d377;
        padding: 5px;
    }
</style>