How to make a container with child items center

I have items inside a <div> container. My problem is that the <div> container that contains all these items won't center horizontally. The code sample below depicts this container with red background. When you maximize the browser, notice the "red" container is left-justified when I want it centered. Applying a margin of auto does nothing. Can anyone help me with this please? Thanks.

<!DOCTYPE html>
<html>
	<title>Notes</title>
	<head>
		<!--<link href="css/notes.css" rel="stylesheet" type="text/css"> -->
		<style>
			html {
				background: #072940;
			}
			
			body {
				width: 85%;
				font-family: Helvetica, sans-serif;
				font-size: 16px;
				margin: 0 auto;
			}
			
			.container { // ***** THIS IS THE CLASS FOR THE CONTAINER
				display: inline-block;
				background: red;
				border-radius: 10px;
				margin: 1em auto;
			}
			
			.menu {
				display: inline-block;
				width: 200px;
				color: black;
				background-color: #EEEEEE;
				border-radius: 10px;
				margin: 1em;
				padding: 1em;
				box-shadow: 10px 10px 8px -3px rgba(0, 0, 0, .3);
				vertical-align: middle;
			}
			
			a {
			    text-decoration: none;
			    color: green; 
			    padding: 5px 10px; 
			    margin-bottom: 2px;
			}
		</style>
	</head>
	<body>
		<div class="container"> <!-- THIS IS THE CONTAINER THAT WON'T CENTER -->
			<div class="menu">
				<p><a href="#">CSS Notes</a></p>
				<p><a href="#">HTML5 Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">Ajax Notes</a></p>
				<p><a href="#">DOM Notes</a></p>
				<p><a href="#">Javascript Notes</a></p>
				<p><a href="#">JQuery Notes</a></p>
				<p><a href="#">JQueryUI Notes</a></p>
				<p><a href="#">JSON Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">PHP Notes</a></p>
			</div>
			<div class="menu">
				<p><a href="#">MySQL Notes</a></p>
			</div>
		</div>
	</body>
</html>

Open in new window

elepilAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Not following you the div is centered, you have the body set to 85% width and auto margin so the container div will be 100% of the body width and sit in the middle of the browser.
0
elepilAuthor Commented:
Thanks for responding, Gary. Did you try to maximize your browser? If you did, you will see that the red area (which is the container) is not centered. I am testing this with a 1920x1200 resolution laptop, so perhaps resolution matters here.
0
GaryCommented:
I only go up to 1440px
Shouldn't matter the resolution
Remove the width and margins from the body and apply them to the container div and see.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

elepilAuthor Commented:
I did try to remove the width and margins from the body and apply them to the container div, but it didn't produce the desired results.

It may be hard to see my problem with limited resolution because it occurs only when all four .menu items are spread out horizontally. If you do not have sufficient screen real estate to expand the browser beyond the combined widths of all four .menu elements, you won't see the issue.

Please look at the screenshot of the client area of my browser with my browser maximized at 1920x1200 resolution. The dark blue background is the entire width of my maximized browser, and notice that the red area is not centered.
0
GaryCommented:
Missing screenshot
0
elepilAuthor Commented:
This is what I see with browser maximized.
0
elepilAuthor Commented:
Sorry, this site handles attachments a bit differently. Clearly I don't do this very often.
0
elepilAuthor Commented:
You know what, Gary, try removing the 2nd through 4th .menu div tags, and you will see it clearly.
0
GaryCommented:
Still the same for me, I'll try and rustle up some peeps who have a larger screen
0
elepilAuthor Commented:
Gary, did you try to remove the 2nd thru 4th <div class="menu"> sets?
0
GaryCommented:
Ahhh, I had your commented code in the css.
Remove display: inline-block; from the container class
0
elepilAuthor Commented:
Removing the display: inline-block simply allows the container to now expand to the right edge of the browser, but that is not what I'm trying to do, that's why I put the display: inline-block to begin with. Let me explain exactly.

I have these four <div class="menu"> within a <div class="container">. I want the div container to wrap around these items "like a glove". What you told me to do merely transferred the gap outside the container to the inside instead. In other words, instead of the entire container looking left-justified, now the menu sections within the container look left-justified.

I want the four .menu sections to always look centered within the container, AND have the container itself center itself in the browser as it is resized. Do you see what I mean?
0
GaryCommented:
You would need to give the container a specific width, there is no other way to center an object that has no specified width.
0
elepilAuthor Commented:
Let's assume I am willing to forego the movement flexibility of the <div class="menu"> within the <div class="container">. So I add a specific width: 550px within the .container class in the styles. The container still won't center.

Can you show me exactly what you mean?
0
GaryCommented:
Something like this
http://jsfiddle.net/y4DEE/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Oh, I didn't take out the display: inline-block when I added the width, that's why it didn't behave correctly.

Thanks for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.