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 Christine Hipp
Christine Hipp
6,554 Points

Nav item sizing issue

I've run into this problem a couple of times and I'm not sure what I'm doing wrong. When I try to size the items in my navigation bar using a % for some reason they act as if the div they're nested in is 1/3 the size, but if I use px unit, they can take up the full space . I want to use a % unit because they're responsive.

this is what it looks like with the width set to 16%

This is what it looks like with the width set to 100%

and with the width set to 165px

the html code for the navigation:

<div class="header">
          <div class="heading">
            <h1>MEOW WOW</h1>
           </div>
           <div class="nav">
            <ul>
              <li>meow</li>
              <li>meow</li>
              <li>purr</li>
              <li>hiss</li>
              <li>meow</li>
              <li>meow</li>
            </ul>
           </div>
     </div>

and the css for the nav:

* {
    display: inline-block;
    box-sizing: border-box;
}

.nav {
    width: 100%;
}

.ul {
    width: 100%;
}

.nav li {
    text-align: center;
    background: #ff8482;
    padding: 15px;
    border-radius: 10px;
    margin: 2px;
    font-size: 1.3em;
    width:  165px;
    text-transform: capitalize;
}```

4 Answers

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Can you provide and demo or paste the HTML code here?

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Probably the problem is with the UL parent element.

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Can you update with all the header html code?

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

How is the <div class="header"> <div class="heading"> and <h1> CSS?

Edit: where is*

Christine Hipp
Christine Hipp
6,554 Points

it definitely is not css. You asked me to update the header html code, so in the section where I had the html for the navigation, i altered it to include the heading that it was grouped with. It's all html.

Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

I'm asking for the CSS of the header, heading and h1 class, you didn't update the css, i'm sorry if you misunderstood, my english is pretty bad hah

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

Well, check the floatings and width of the parent elements, somewhere probably you're using another metrics on them. (got it?) sorry bad english again.

good luck.