Having trouble with one nav link that goes to different section of page

I just completed my personal portfolio project with FreeCodeCamp. All my tests passed but I have been stuck with the “About Me” navigation link. When I click on the “About Me” link in my nav bar, it goes to the section above where my projects are (it links us straight where you see “Project 1” “Project 2”). I can’t figure out what the problem is in my html and css code. Here is a link to my project: https://codepen.io/shannonliwalsh/pen/mdEeeJr. (My images don’t work when others open my link since I don’t have codepen pro, I hope that’s okay).
Any help would be greatly appreciated. Thanks in advance!

I think it is because you are using float:left for the columns (for the project part), without clearing the float after.

You have some css to do this, by applying it to the row class, so wrapping the column divs in a row div fixes it.

Using floats and clears to do layout is a bit old fashioned now, and tricky as hell (I always just stuck to floats/clears, but you have to remember to clear!) it is a bit easier with flexbox, so go read up on that.

1 Like

Thank you so much! I was having trouble with understanding how to align my projects next to each other with rows and columns so I followed a youtube video. I guess it was outdated since it uses floats/clears. Would you advise I replace that whole floats/clears with flexbox since it’s a bit easier? Once I align the two projects next to each other the way that I want using flexbox, will my nav bar/ “about me” problem be fixed?

Welcome to the forums @shannonliwalsh

You don’t need codepen pro. Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)

  • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio

I’d advise you fix this up using floats, because you just need to wrap the column divs with row divs, something like this:

<div class="row">
    <div class="column">...</div>
    <div class="column">...</div>

And your problem will be fixed (I tried it out in the codepen, but lost it since). I also like this from the HTML perspective because it makes sense right? Rows and columns within them!

I recommend you learn about flexbox after you finish this project and maybe come back and try it in flexbox. It is easier in flexbox, and there are more options too, BUT learning flexbox is not easy as it requires a few new concepts and some experience playing with it, so I think it would be too difficult to try and fix a bug by bringing in a new concept.

I have thought about it more since I wrote ‘go read up on flexbox’! I really mean ‘go read up on flexbox - at some point in the future because it’s useful, … but no rush!’

Thank you @martinc!! Now my problem was definitely fixed, when I click on “about me” in my navigation, it goes to the right spot. The only problem now is it made my projects go one on top of another instead of next to each other like how it was before. Would you happen to know why this happened and how I can fix it? I definitely know now that I need to brush up on having a better understanding of rows, columns and floats… since it is still very confusing to me. I will definitely read up on flexbox too!
Thank you again for the help.

Thank you! I don’t yet have other pens in codepen, this is my first project after learning to code so I will only include those once I finish more projects. I also had a logo and image of myself that doesn’t seem to be working when I link my project to others without codepen pro, is that possible? When I put my code on a code editor and open with chrome, the pictures seem to work fine.

No worries. People usually do the projects in order because the first one (tribute page) starts out pretty simple and then the project increase slightly in difficulty. That’s why I thought you had others.

Yes it is possible without codepen pro.

The reason you see your pics is because they’re in your google account. We (user’s and codepen) don’t have access to your account so we can’t see your pics. You’ll have to host them somewhere public like photobucket, GitHub, etc.

1 Like

@shannonliwalsh - it’s because the 50% width is the width of the box it is inside, but that box has padding of 8px, so it doesn’t quite fit. Removing that padding will fix it.

In general to fix these yourself the best way is to F12 and look at the element and how they are styled, you can experiment quickly with changes and how it affects things. And then read up on various CSS as you go - but I am still doing this, I haven’t become an expert in CSS I just go through this cycle to find out what’s wrong.

It worked. Thank you so much for all your help! I really appreciate it!

Thank you! I will work on that so that others can view them as well