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

Jennifer Hughes
Jennifer Hughes
11,421 Points
Posted by Jennifer Hughes
Jennifer Hughes
11,421 Points

Centering a group of floating elements within a container div

Hello,

This is not a Treehouse project, but one I am working on my own. Given that this is a great community, I thought I'd post by problem:

I want to center the main content on my page, and I have tried several things that have not worked.

Forgive my code, it's a bit....well, perhaps not too elegant. But, here is my HTML;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flavors</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flavors-style.css">
    <link href='http://fonts.googleapis.com/css?family=Special+Elite|Ribeye+Marrow' rel='stylesheet' type='text/css'>
</head>
<body>
    <header>
        <h1>Flavors</h1>
    </header>
    <div class="wrapper">

        <div class="grid banana">
            <h3>Banana</h3>
        </div>

        <div class="grid strawberry">
            <h3>Strawberry</h3>
        </div>

        <div class="grid nugget">
            <h3>Bittersweet Nugget</h3>
            <p>Dark chocolate ice cream with bittersweet chocolate chips</p>
        </div>

        <div class="grid coconut">
            <h3>Coconut</h3>
        </div>

        <div class="grid cherry">
            <h3>Oregon Bing Cherry</h3>
        </div>

        <div class="grid french_crunch">
            <h3>French Crunch</h3>
            <p>French roast ice cream with chocolate covered espresso beans.</p>
        </div>

        <div class="grid mandarin">
            <h3>Mandarin Chocolate</h3>
            <p>Dark chocolate ice cream with a touch of orange</p>
        </div>

        <div class="grid banana_brownie">
            <h3>Fresh Banana Brownie</h3>
        </div>

        <div class="grid galaxy">
            <h3>Galaxy</h3>
            <p>Chocolate malt ice cream with white and dark chocolate chips</p>
        </div>

        <div class="grid chocolate_oreo">
            <h3>Chocolate Oreo</h3>
        </div>

        <div class="grid muddy_river">
            <h3>Muddy River</h3>
            <p>Chocolate malt ice cream with caramel swirl</p>
        </div>

        <div class="grid chocolate_lovers">
            <h3>Chocolate Lovers</h3>
        </div>

        <div class="grid rocky_road">
            <h3>Rocky Road</h3>
        </div>

        <div class="grid fudge_brownie">
            <h3>Fudge Brownie</h3>
        </div>

        <div class="grid turtle">
            <h3>Turtle</h3>
        </div>

        <!-- and so on and so forth-->

    </body>
</html>

And here is my CSS;

body {
    max-width: 1200px;

} 
h3 {
    color:white;
    text-align: center;
}

.wrapper {
    overflow: hidden;
 }
.grid p {
    color: white;
    font-family: 'Special Elite', cursive;
    font-size: 1em;
    text-align: center;
}
.grid {
    width: 16%;
    height: 160px;
    float: left;
    border-radius: 15px;
    margin: 15px 30px;
    padding: 5px 0;
}

.banana {
    background-color: #F8F991;
}

.coconut h3 {
    color: black;
}

div.grid.coconut {
        border: 1px solid black;
}

.nugget {
    background-color: #352B2C;
}

.strawberry {
    background-color: #B6465F;
}

/* and so on */

Thanks for your help!

3 Answers

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

Try this:

h1 {
    text-align: center;
}
.wrapper {
    overflow: hidden;
    border: solid black 1px;
    width: 90%;
    margin: auto;
 }
Jennifer Hughes
Jennifer Hughes
11,421 Points
Jennifer Hughes
Jennifer Hughes
11,421 Points

Hi Brenda,

Thanks for taking a look at my code.

Your suggestion centers the wrapper div, but I want the items inside of that div to be centered. Right now, there is a lot more margin on the right hand side than the left.

Cheers, Jenn

Brenda Krafft
Brenda Krafft
18,036 Points
Brenda Krafft
Brenda Krafft
18,036 Points

Oh, I see.

If you make the left/right margins on the grid 45px , that will do the trick for larger screens:

margin: 15px 45px;

Does that help?