Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matthias Nörr
Matthias Nörr
8,614 Points

Why does 'margin: 0 auto' work when using 'display: flex' on the parent container?

I tried centering the div "content-navigation" with the "margin 0 auto" css-command. The margins were only applied when I used "display: flex" on the parent container. Why did the browser not apply the margin before?

<div class="container-fluid">
            <div class="row header-background">
                <div class="col-sm-10 content-navigation">
                    <div class="row">
                        <div class="col-sm-6 col-xs-12 logo">
                            <img src="./pictures/logo.png">
                        </div>
                        <div class="col-sm-6 col-xs-12 main-navigation">
                            <ul>
                                <li><a href="#home">Home</a></li>
                                <li><a href="#news">News</a></li>
                                <li><a href="#music">Music</a></li>
                                <li><a href="#gallery">Gallery</a></li>
                                <li><a href="#contact">Contact</a></li>                     
                            </ul>
                        </div>
                    </div>
                </div>  
            </div>
        </div>      

.header-background {
    display: flex;

.content-navigation {
    margin: 0 auto;
}

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

Because before display: flex was used, both .header-background and .content-navigation where block level elements, which is the default display property for a div. Blocks are already 100% width, so you where trying to center the navigation element when it was already 100% width of the .header-background, which was also 100% wide. Because of this, there was no extra margin that could be used to center anything, it technically already was.

When you apply display: flex, it turned .content-navigation into a flex item, and because no other properties where set to control it's width, it now became only as wide as the content inside of it. Because of this, there was now a bunch of margin it could divide up because it's parent, the flex item was still 100%.

Matthias Nörr
Matthias Nörr
8,614 Points

Thanks. Is there a different way other than using "display: flex" ?

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

You could remove display: flex; from your .header-background and give your .content-navigation a width.

.content-navigation {
    width: 80%; /* example */
    margin: 0 auto;
}

This will then center the .content-navigation div based on its own width, inside of the .header-background div.

Matthias Nörr
Matthias Nörr
8,614 Points

That does not work. Maybe because I am also using bootstrap grid containers?

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

Sorry, I should of noticed that you were using Bootstrap.

I believe that the code I posted center aligns the .content.navigation div, but not the list inside of it, which hugs the left hand side of the div.

Not an ideal solution for you though.

As a side note, whilst using Bootstrap, it may be easier using the predefined classes for your navigation bar to achieve the results you are looking for? ..

Here is a very rough work in progress that I am currently designing for practice, using Bootstrap navigation classes as an example:

Bootstrap Navigation Example

Matthias Nörr
Matthias Nörr
8,614 Points

True. But I decided to only use the Bootstrap grid and design the rest myself.