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: