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

Ryan Canty
PLUS
Ryan Canty
Courses Plus Student 5,665 Points
Posted by Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

why won't my ul element center properly?

No matter what I do my ul element won't center properly. There is like a 100px space on the left of It that is just white, and I have no idea why...

here is a image of my problem: http://imgur.com/a/t3jbB

my CSS is:

/* ================================= Base Styles ==================================== */

  • { box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

li { list-style: none; } p { font-size: .95em; margin-bottom: 1.5em; }

h2, h3, a { color: #093a58; }

h2, h3 { margin-top: 0; }

a { text-decoration: none; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name { font-size: 1.25em; }

.name, .main-nav li { text-align: center; background: #fff; margin-top: 6px; margin-bottom: 6px; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

/* ---- Layout Containers ---- */

.container { padding-left: 1em; padding-right: 1em; }

.main-header { padding-top: 1.5em; padding-bottom: 1.5em; background: #3acec2; margin-bottom: 30px; }

.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.wrap {
    min-height: calc(100vh - 89px);
}

.container {
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
}

}

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hi Ryan,

I can't really tell from the CSS and the image alone (HTML would be nice to see), but I suspect that it has to do with the browser's default CSS.

Are you using a reset? (Like https://necolas.github.io/normalize.css/)

To quickly find out if it's that, you can add at the top of your CSS:

 * {
    padding: 0;
    margin: 0;
}

2 Answers

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hi Ryan!

I'm glad that that fixed it!

I don't remember it from the top of my head, but if you already have normalize linked, then it might be that normalize doesn't take care of resetting the padding on uls.

Now you know uls get css added by the browser by default. That's how you fix knowledge!

Keep it up! ??

Ryan Canty
PLUS
Ryan Canty
Courses Plus Student 5,665 Points
Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

Flor Antara Thanks for the reply! Its strange.... that bit of code you gave me fixed the problem, but my normalize.css document is already linked to my html document so I feel like something else is off. Here is my html code below:

'''html <!DOCTYPE html> <html> <head> <title>Best City Guide</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="try.css"> </head> <body> <div class="wrap">

    <header class="main-header">
        <div class="container">
            <h1 class="name"><a href="#">Best City Guide</a></h1>
            <ul class="main-nav">
                <li><a href="#">ice cream</a></li>
                <li><a href="#">donuts</a></li>
                <li><a href="#">tea</a></li>
                <li><a href="#">coffee</a></li>
            </ul>
        </div>
    </header>



    <div class="container"> 


        <div class="primary col">
            <h2>Welcome!</h2>
            <p>Everything in this city is worth waiting in line for.</p>
            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
        </div><!--/.primary-->

        <div class="secondary col">
            <h2>Great food</h2>
            <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <p> Fruitcake jelly-o croissant souffl&#233;. Biscuit jujubes drag&#233;e. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart.</p>
        </div><!--/.secondary-->

    </div><!--/.container-->

</div><!--/.wrap-->

<footer class="main-footer">
 <span>&copy;2015 Residents of The Best City Ever.</span>
</footer>

</body> </html> '''