Home/ Questions/Q 8492667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:47:14+00:00

I have centred 3 divs, but the grouping is off-centre by about 10-20 pixels.

  • 0

I have centred 3 divs, but the grouping is off-centre by about 10-20 pixels. Why is this, and how do I fix it? I am using Google Chrome.

Here’s the code:
jsbin

Or you can view the code below:
HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="container">
    <div class="csect"></div>
    <div class="csect"></div>
    <div class="csect"></div>

    </div>
</body>
</html>

CSS:

#container
{
    width: 800px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.csect
{
    display: inline;
    float: left;
    margin-left: 25px;
    margin-right: 25px;
    background-color: #E0E0E0;
    width: 200px;
    height: 200px;

}

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your issue is in the width of your container.

    (25*2)+200 = 250

    250*3 = 750, so you’ve got a gap of 50px to the right, where they’re aligned left.

    Simply change the container width: 800px; to width: 750px; and it’ll be fine.

    • 0