margin: 0 auto not centering?

I've tried the following code in Chrome, Firefox, and Safari, but my div isn't quite being centered.


<!DOCTYPE html> 
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css" />
    <div class="center">Hello!</div>


.center {
  width: 400px;
  margin: 0 auto;
  border: 5px solid black;

This produces the following in Chrome:

and you can see that the left margin is bigger than the right margin.

What am I doing wrong?


It is because the body has a margin (default for browsers):

body { margin: 0px; }

You might want to use a CSS reset.

It should look normal if your window is bigger. In your screenshot it's like:

Need Your Help

How to do custom validation in ngTagsInput(not regex)?

javascript angularjs validation angularjs-directive ng-tags-input

For example I want to add custom validation where addedValue&lt;20, how to implemenet it?

Portable Class Library Projects Dont Work with NuGet

c# .net visual-studio-2012 xamarin nuget

I have a funny error where NuGet will not work in Portable Class Library projects. I have created a portable class library project and when I attempt to search (through the NuGet dialog) or install