Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Hello, I have a question about a code issue I’m facing. I’m trying to have equal spacing above and below the “.suggestion” element on line 45 in my HTML code. I’ve applied the same margin values to both the top and bottom, but there seems to be a difference. The top margin appears larger than the bottom margin. I did some inspecting, and it turns out the “#projects” section on line 26 has a tiny gap at the bottom, even though I set both margin and padding to zero. Can someone please explain what might be causing this issue and how can I fix it?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="styleshet" href="styles.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>My Personal Portofolio</title>
  </head>
  <body>
    <header>
      <nav id="navbar">
        <ul>
          <a></a>
          <a></a>
          <a></a>
          <a></a>
        </ul>
      </nav>
    </header>
    <main>
      <section id="welcome-section">
        <h1>Hi I'm Sal</h1>
        <h3>Welcome to my portofolio</h3>
      </section>
      <section id="projects">
        <figure class="project-tile">
          <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form"><img src="https://i.ibb.co/gJSzSwj/Survey-Form.jpg" border="0" alt="Survey form to make songs"></a>
          <figcaption>Song Survey Form</figcaption>
        </figure>
        <figure class="project-tile">
          <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page"><img src="https://i.ibb.co/V0GV9nQ/Tribute-Page.png" alt="Tribute-Page"></a>
          <figcaption>Tribute Page for Mrs. Susi Pudjiastuti</figcaption>
        </figure>
        <figure class="project-tile">
          <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page"><img src="https://i.ibb.co/YDbZdyb/Java-Script-Documentation.jpg" alt="Java-Script-Documentation"></a>
          <figcaption>JavaScript Documentation</figcaption>
        </figure>
        <figure class="project-tile">
          <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page"><img src="https://i.ibb.co/HB0d5dS/Product-Landing-Page.jpg" alt="Product-Landing-Page"></a>
          <figcaption>Product Landing Page</figcaption>
        </figure>
      </section>
      <section class="connect-with-me">
        <div class="suggestion">Let's work together</div>
        <div>How do you take your coffe?</div>
        <div id="connect">
          <a href="https://github.com/RatuBS" target="_blank">
            <i class="fa fa-github" style="font-size:36px"></i>
            Github 
          </a>
          <a href="https://twitter.com/RatuBS27158" target="_blank">
            <i class="fa fa-twitter" style="font-size:36px"></i>
            Twitter
          </a>
          <a href="mailto:raaatubs@gmail.com" target="_blank">
            <i class="fa fa-at" style="font-size:36px"></i>
            Send an email
          </a>
          <a href="tel:-91300080090" target="_blank">
            <i class="fa fa-mobile-phone" style="font-size:36px"></i>
            Call me
          </a>
        </div>
      </section>
    </main>
  </body>
</html>

/* file: styles.css */
#projects{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; 
  
}

.suggestion{
  background-color: #B4C424;
  text-align: center;
  box-sizing: border-box;
  font-size: 3rem;
  font-family: sans-serif;
  margin-top: 25px;
  margin-bottom: 25px;
}

#connect{
  display: flex;
  justify-content: center;
  gap: 70px;
}

#connect *{
  color: 	#4682B4;
  margin-bottom: 20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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:

2

I’m not exactly sure I understand your issue, but it seems to me that you need to get rid of the bottom margin on the last figure in the projects section.

3

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