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 Tony Miri
Tony Miri
6,508 Points

Navbar item padding is collapsing after refresh

I'm using flexbox to build my personal portfolio site and I'm having a strange issue with the items in my navbar.

-When I type the page address directly into my browser (chrome) the page loads normally.

-When I refresh the page, the padding on my nav items collapses and they appear right next to eachother.

-When I follow a link to the page the padding is collapsed.

I don't understand what is happening. Other people have viewed the page and said they aren't having the same issue, but it definitely happens for me every single time.

I don't know if I'm allowed to link to my page or not, so someone please let me know if you want to see the page and the css.

Thanks.

Here is the CSS for the navbar:

.nav {
  background: white;
  display: flex;
  justify-content: center;
  height: 6vh;
  color: #2c3e50;
  .content-wrapper {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;
    h2 {
      margin-right: auto;
    }
    .button-wrapper {
      display: flex;
      width: 20%;
      height: 80%;
      justify-content: space-around;
      align-items: center;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5%;
        text-decoration: none;
        height: 80%;
        margin-top: auto;
        text-decoration: none;
        color: #2c3e50;
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transition: background .2s ease-out, color .4s ease-out;
        &:hover {
          background: #16b985;
          color: white;
        }
      }
    }
  }  
}

1 Answer

Tony Miri
Tony Miri
6,508 Points
Tony Miri
Tony Miri
6,508 Points

I've "solved" the issue by removing the padding and changing the width of the items directly. *doh* But still a strange issue nonetheless..