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

Kylah Ellison
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Kylah Ellison
Front End Web Development Techdegree Graduate 17,588 Points
Posted by Kylah Ellison
.a{fill-rule:evenodd;}techdegree seal-36
Kylah Ellison
Front End Web Development Techdegree Graduate 17,588 Points

Border Radius not working on my list items?

I can't figure out why the border radius property is not affecting my navigation list items. When I look at this in any browser, my horizontal navigation is just in one long containing box, when it should be four separate "buttons" with a 5px border radius. What am I doing wrong??

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav">
                <li><a href="#">Link 1</a></li> 
                <li><a href="#">Link 2</a></li> 
                <li><a href="#">Link 3</a></li> 
                <li><a href="#">Link 4</a></li> 
            </ul>
        </header>
        <div class="primary-content col">
            <h2>Primary Content</h2>
            <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
            <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
            <hr>
            <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>

And here is the applicable CSS:

.main-header            {background-color: #384047;}
.main-logo          {background-color: #5fcf80;}
.main-nav           {background-color: #3f8abf;}

.main-header {
    padding: 20px; 
    white-space: no-wrap;
}

.main-logo,
.main-nav,
.main-nav li {
    display: inline;  
}

.main-logo {
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 50px;
}


.main-nav li {
    margin-right: -10px;  
    padding: 10px 20px;
    border-radius: 5px;
}

.main-logo a,
.main-nav a {
    color: white;
    text-decoration: none;
}
Paul Sullivan
Paul Sullivan
7,876 Points
Paul Sullivan
Paul Sullivan
7,876 Points

Well, the CSS looks good as far as I can tell. (Albeit a little hard to read in the format it's in) Can you put the HTML up as well and possibly format the CSS to be a bit easier to read? Also, if you could also put them between a set of ``` that would be great. :)

Example of "easy to read" CSS:

.wrapper {
   position:relative;
   height:100%;
   width:350px;
   background-color:#444;
}
.something {
   height:50px;
   width:50px;
   border-radius:100%;
   background-color:#000;
}

1 Answer

Paul Sullivan
Paul Sullivan
7,876 Points
Paul Sullivan
Paul Sullivan
7,876 Points

You actually are setting it all correctly in regards to setting the border-radius. What you'll want to change is below. :)

.main-header            {background-color: #384047;}
.main-logo          {background-color: #5fcf80;}

/* The change is to the selector for ".main-nav". We're simply going to add "li" to the end of it in order to make your li visible. :) */

.main-nav li           {background-color: #3f8abf;}

.main-header {
    padding: 20px; 
    white-space: no-wrap;
}

.main-logo,
.main-nav,
.main-nav li {
    display: inline;  
}

.main-logo {
    padding: 10px 20px;
    border-radius: 5px;
    margin-right: 50px;
}


.main-nav li {
    margin-right: -10px;  
    padding: 10px 20px;
    border-radius: 5px;
}

.main-logo a,
.main-nav a {
    color: white;
    text-decoration: none;
}

Hope that helped. :)

Paul Sullivan
Paul Sullivan
7,876 Points
Paul Sullivan
Paul Sullivan
7,876 Points

Easy mistake to make! :) You're very welcome.