Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
So I’ve done everything that the Personal Webpage required, but.
I do have a problem with the navbar.
It keeps going over the right-margin that I put and I’ve been stuck on this for days…

Help would much be appreciated!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
      <head>
        <title>My Personal Portfolio</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body> 
          <div id="main-div">
        <header>
          <nav id="navbar">  
              
              <a class="nav-link" href="img">Home</a>
              
              <a class="nav-link" href="#skills-h2">Skills and Interests</a> 

              <a class="nav-link" href="#skills-h2"></a> 
              
              <a class="nav-link" href="#about-me">About Me</a>
              
              <a class="nav-link" href="">Contact</a>
         </nav> 
            
      </header> 
          
          <img src="https://cdn.pixabay.com/photo/2023/05/25/12/52/rose-8017300__340.jpg" /> 
        <main> 
         
         <section id="welcome-section">
          <div id="center-text">
            <h1>Jasmine Snow | Student in Programming</h1> 
          </section>
          
          <section id="projects">
          <h2 id="about-me">About Me</h2>
            <p class="project-tile">Hello  I'm Jasmine, I'm a student learning Web Design, and I'm from Philippines:).</p>

        <div id="skills-interests">
          <div class="skills-div">
            <h2 id="skills-h2">Skills:</h2>
              <ul id="skills-ul">
                <li>HTML5</li>
                <li>CSS3</li>
                <li>Ballet</li>
                <li>Human Languages: English Filipino Spanish</li>
              </ul>
        </div>
      </div>

        <div class="interests-div">
          <h2 id="interests-h2">Interests:</h2>
              <ul id="interests-ul">
                <li>Ballet</li>
                <li>CSS3</li>
                <li>Photography</li>
              </ul>
      </div>
         
            <a id="profile-link" target="_blank"></a>
          </section>


         </div>
        </main>
       </div>
      </body>
</html> 
/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

@media and screen only(max-width: 500px;) {

}

body {
  background-color: #33415c;
  margin-left: 6rem;
  margin-right: 6rem;
}

h1 {
  color: white;
  position: static;
}

h2 {
  color: white;
  padding: 1rem;
}

#interests-h2 {
  padding: 1rem;
}

#skills-h2 {
  padding: 1rem;
}

p { 
  color: lightblue;
  padding: 1rem;
}

img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  width: 100%;
  height: 50%;
  filter: blur(8px);
  -webkit-filter: blur(3px);
}

#center-text {
  position: relative;
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -190%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
  background-color: black;
  opacity: .6;
}

#navbar { 
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
}

header {
  display: block;
  position: fixed;
  top: 0;
  height: 3rem;
  width: 100%;
  margin: 0 auto;
  background-color: #4a4e69;
  z-index: 3;
}

.nav-link {
  font-size: 25px;
  margin-left: 7rem;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 1rem;
  font-family: Tahoma, sans-serif;
  font-size: 1.2rem;
  display: inline-block;
}

.skills-interests {
  text-align: right;
}

.skills-div {
  text-align: left;
}

.interests-div {
  text-align: left;
  
}

li {
  color: lightblue;
  font-size: 17px;
  justify-content: center;
} 

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

The default value for the flex-wrap property is nowrap, which means all of the links in the nav menu will be on one line and if that line is wider than the width of the browser window then the menu will be cut-off on the right.

So you’ll need to adjust the flex-wrap property so that the nav menu wraps if it is too wide for the browser window.

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