Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

I’m having trouble aligning my #nav-links. It was working, and I put an img tag for a picture, but decided not to put it in and when I deleted it, the alignment got all messed up.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta display="viewport">
    <link rel="stylesheet"
    href="styles.css">
      </nav class="nav-bar">
    </section>
    <title>Portfolio</title>
    <section id="welcome-section">
      <nav id="nav-bar">
        <a class="nav-link" href="#about">About</a>
        <a class="nav-link" href="#work">Work</a>
        <a class="nav-link" href="#contact">Contact Me</a>
      </nav>
      <h1>My name is Nate</h1>
      <h3>Just getting started coding</h3>
      <h4>I fell in love with it watching YouTube videos!</h4>
    </section>
    <h1>Work</h1>
    <nav>
    <section><a id="nav-links" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form">Survey Form</a></section>
      <section><a id="nav-link"
      href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page"><section>Tribute Page
        </section></a>
        <section><a id="nav-links"
      href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page"><section>Technical Documentation Page
        </a></section>
        <section><a id="nav-link"
      href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page"><section>Product-Landing Page
        </section></a>
    </nav>
  </head>
  <body>
    <section></section>
  </body>
</html>

/* file: styles.css */
#nav-link {
  font-size: 20px;
  text-align: center;
}
h1, h3, h4 {
  text-align: center;
}
.nav-link {
  text-align: center;
  display: flex;
  justify-content: space-around;
}
#nav-links {
  text-align: center;
  font-size: 20px;
  display: flex;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

As far as I can tell the Survey Form and Documentation Page will render the way you want them to but the Tribute Page and Product Landing Page will not. I would suggest trying to make the id on all four of them equal to id=“nav-links”. Currently, the id is id=“nav-link” for two and id=“nav-links” for the other two. Let me know if fixing that works as you intend…

3

No, that didn’t work. I think that was from me playing with it this morning.

4

I just noticed this but at the beginning when you meant to use an opening nav element you closed it here:

</nav class="nav-bar">

You are also closing a <section> element that was never opened and therefore does not exist here:

</nav class="nav-bar">
    </section>
5

I fixed both of them and still nothing. I just don’t understand why it would work earlier, but not now. All I did was take out an img element.

6

Through each of these <section> elements except the first one why are you opening a <section> element before the <nav> element then before closing the <section> element you are opening another before the displayed words then closing it after the displayed words? If this is confusing I can try to be more clear but take a look at the opening and closing tags of all of your <section> elements.

7

I’m gonna be honest, I have no idea why I did that. Maybe I copied and pasted something and didn’t delete it all lol. I took the extra section elements out and now they’re all over on the left.

8

Actually, I got it. I had to add the justify-content to it. Thank you so much!

9

You are welcome. I am glad you managed to figure it out and fix it!

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.