Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the posts to display in two columns right next to each other without any space between them. Check out the image here: https://i.sstatic.net/VLkkr.jpg
CSS:
body {
margin: 0px;
background-color: antiquewhite;
text-align: center;
word-wrap: break-word;
}
body #content {
width: 900px;
display: inline-block;
margin: 15px 15px 15px 15px;
}
body #content #wrapper {
display: inline-block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
body #content #wrapper #posts {
display: inline-block;
background-color: white;
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
float: left;
text-align: left;
}
body .sidebar {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
body .sidebar .sidebar-inside {
display: table-cell;
max-width: 250px;
margin: 0 auto;
vertical-align: middle;
}
/* etc */
HTML:<!-- These two columns -->
<div id='content'>
<div id='wrapper'>
{block:Posts}
<div id='posts'>
{block:Photo}
<!-- Here are posts. -->
</div>
{/block:Posts}
</div>
</div>
<!-- Sidebar -->
<div class='sidebar'>
<div class='sidebar-inside'>
</div>
</div>I could really use some assistance, so if anyone has advice or tips, please help me out!