margin: 0 auto not centering?

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

HTML:

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

custom.css:

.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?

Answers


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