Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
I have a problem with removing white spaces between sections on my project. I would appreciate any help:)

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="styles.css">
   <link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href=",wght@0,400;1,600&family=Roboto+Slab:wght@300;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />


         <a href="#welcome-section" class="navbar"><li>About</a></li>
         <a href="#projects" class="navbar"><li>Projects</a></li>
         <a href="#socials" class="navbar"><li>Socials</a></li>

     <section id="welcome-section">
       <h1>Hey I am Mimic</h1>
       <p>a web developer</p>

     <section id="projects">
       <h2 id="project-tile">These are some of my projects</h2>
       <img src="" >
       <img src="">
       <figcaption>Tribute page</figcaption>
       <img src="">
       <figcaption>Tic Tac Toe game</figcaption>
       <a href="">Show all ></a>

   <footer id="socials">
     <h2>Let's work together...</h2>
     <p>How do you take your coffee?</p>
     <a href="" target="_blank"><i class="fa-brands fa-free-code-camp"></i></a>
     <a href="" target="_blank"><i class="fa-brands fa-github"></i></a>
     <a href="" target="_blank"><i class="fa-brands fa-spotify"></i></a>

/* file: styles.css */
body {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 font-family: 'Josefin Sans', sans-serif;

a, li {
 text-decoration: none;
 color: black;
 list-style-type: none;

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 z-index: 1;

li {
 float: right;

li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;

li:hover {
 background-color: #45567d;

h1, h2 {
text-align: center; 
font-size: 2rem;
color: white;

section:first-of-type {
 background-color: #303841;

section:nth-of-type(2) {
  background-color: #45567d;

footer {
 background-color: #303841;

p {
 text-align: center;
 color: white;

img {
 width: 100px;
 display: flex;
 flex-direction: coloumn;
 flex-wrap: wrap;
   **Your browser information:**

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

please see the instructions below on how to use codepen, then one you have create a codepen, you can point to it here and tell us more about your objective.
(including which elements you are trying to modify and what you have attempted to do to them)