My content is more to the right than it is to the left?

My content is more to the right than it is to the left?


I’ve never had this issue before in my life, nor did I noticed it until I tested it on my iPhone.

Appearantly both of my divs are more to the right than they are to the left.

enter image description here

Here’s my codes for the content area, as well as the tables if needed.

Divs for the content area

.content {
    margin: 0 auto;
    width: 60%;
    clear: both;
    display: none;
#index {
    display: block;
#left {
    float: left;
    width: 75%;
    height: auto;
#right {
    float: right;
    width: 25%;
    height: auto;

Divs/classes for the Tables

.table-default, .table-blue, .table-red {
    padding: 0;
    margin: auto;
    border-spacing: 0;
.table-default, .table-blue, .table-red i {
    color: 000;
.table-default  th {
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    font-size: 16px;
    padding: 8px;
    color: #000;
    border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #B2B2B2;
.table-default  td {
    background: #FFF;
    color: #000;
    font-size: 12px;
    padding: 10px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-    right-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #B2B2B2;
Problem courtesy of: Cameron Swyft


If the question is why the .content is not in the center: then the answer is, it is. What you’re seeing is the overflow. Which is evident if you apply overflow:hidden

Also note that, at the moment the .content has 0 height so in fact everything is overflowing. Eliminating the overflow of .content will fix the issue.

This is how it looks like once you apply a proper height and hide the overflow:

debug result

You can adjust the width of #left (70%) and #right (30%) to remove the overflow which results in

final result

Solution courtesy of: T J


Leave a Reply

Your email address will not be published. Required fields are marked *