0
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