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

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.