Personal Portfolio Webpage - Build a Personal Portfolio Webpage - Navbar CSS issues

I have run into this issue of replicating CSS properties of the navbar with previous projects. From what I can assess, the main CSS elements involved here are:

  • nav
  • nav-bar
  • ul

I have copied/pasted all of the above CSS properties from the example site (https://personal-portfolio.freecodecamp.rocks/) into my code, but the li items are all bunched together. What am I doing wrong? What am I missing when I try to replicate the CSS properties here? Thank you for your help!

HMTL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="styles.css" rel="stylesheet">
  <title>Personal Portfolio Website</title>
</head>
<body>
<!-- START NAV -->  
  <nav id="navbar" class="nav">
   <ul class="nav-list">
     <li>
       <a href="#welcome-section">About</a>
      </li>
     <li>
       <a href="#projects">Work</a>
      </li> 
     <li>
       <a href="#contact">Contact</a>
      </li>  
     </ul>
    </nav>
<!-- END NAV --> 
<!-- START WELCOME SECTION --> 
  <section id="welcome-section" class="welcome-section">
   <h1>Hey I am Mitsu</h1>
   <p>a web developer</p>
  </section>
<!-- END WELCOME SECTION --> 
<!-- START PROJECTS SECTION --> 
  <section id="projects" class="projects-section">
   <h2 class="projects-section-header">These are some of my projects</h2>
<!-- START PROJECT 1 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/zYyRMPz" target="_blank" class="project project-title">
     <img class="project-image" src="https://cdn.pixabay.com/photo/2016/03/29/10/38/saxophone-1287911_1280.png" alt="project">
     <p class="project-title">
       <span class="code"><</span>
       Product Landing Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 1 -->   
<!-- START PROJECT 2 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/jOXZQGb" target="_blank" class="project project-title">
     <img class="project-image" src="" alt="project">
     <p class="project-title">
       <span class="code"><</span>
       Crystal Survery Form
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 2 -->   
<!-- START PROJECT 3 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/yLGvQPJ" target="_blank" class="project project-title">
     <img class="project-image" src="" alt="project">
     <p class="project-title">
       <span class="code"><</span>
       CSS Documentation Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 3 -->   
<!-- START PROJECT 4 -->    
   <div class="projects-grid">
    <a href="https://codepen.io/Mitsu-Kubo/full/OJrQaxY" target="_blank" class="project project-title">
     <img class="project-image" src="" alt="project">
     <p class="project-title">
       <span class="code"><</span>
       Tolkien Tribute Page
       <span class="code">></span>
     </p>
    </a>
<!-- END PROJECT 4 -->   
   </div>
   <a href="" target="_blank" class="btn btn-show-all">
     <p class="project-title"></p>
   </a>
  </section>
<!-- END PROJECTS SECTION --> 
<!-- START CONTACT SECTION --> 
  <section id="contact" class="contact-section">
   <div class="contact-section-header"></div>
   <div class="contact-links">
     <a id="profile-link" href="" target="_blank" class="btn contact-details">
       <i class="fab fa-github"></i>
       GitHub
     </a>
   </div>
  </section>
<!-- END CONTACT SECTION --> 
<!-- START FOOTER SECTION --> 
  <footer>
    <p></p>
    <p></p>
  </footer>
<!-- END FOOTER SECTION --> 

</body>
</html>

CSS

:root {
  --main-white: ##f0f0f0;
  --main-red: #be3144;
  --main-blue: #45567d;
  --main-gray: #303841;
}
body {
  font-family: Poppins, sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-white);
}

@media (max-width: 61.25em) 
html {
  font-size: 58%;
}

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.nav-list {
  display: flex;
  margin-right: 2rem;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  list-style: none;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.projects-section-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid var(--main-white);
}

h2 {
  font-size: 4.2rem;
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-align: center;
}

.code {
  color: var(--main-gray);
  transition: color 0.3s ease-out;
}
.project-image {
  height: calc(100% - 45rem);
  width: 50%;
  object-fit: cover;
}
img {
  display: block;

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

What you mean with bunched together? Maybe if you add a property to your .nav-list class selector, things will change. The default flex-direction is row if you display something into flex

.nav-list {
  display: flex;
  margin-right: 2rem;
  flex-direction: column;
}

In changing the flex-direction to column could fix your issue.

Or you want to stay by default and need some space between the items. Then you can add the property gap:

.nav-list {
  display: flex;
  margin-right: 2rem;
  gap: 1rem;
}
2 Likes

Thank you! Adding the gap property fixed this!

2 Likes

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