Product Landing Page - Empty Gap between grid areas

HTML-CSS
1

Tell us what’s happening:
Hi everyone!
I’m doing the Product landing page challenge and I’m having troubles with organization of my grid. As you can see in example below, there is an empty gap between grid areas header (orange), content (grey) and footer (purple).

How do I remove that empty space?

Your code so far
https://codepen.io/thomyra/pen/jOMGrLJ

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Build a Product Landing Page

Link to the challenge:

*Edited to specify the color of the areas in which there are empty gaps.

2

Hey, I’m not entirely sure why you have a grey container hiding behind your blue content, but to get rid of the gaps between the sections you need to adjust your vertical margin for your .features

.features {
    display:grid;
    grid-template-columns: 25% 75%;
    grid-template-areas: 
        "icon desc";
    background-color: lightblue;
    height: 100%;
    width: 100%;
    margin: 0; /* I changed this to 0 instead of 2%. */
}

Hope that helps.

3

Hello JR4Y, Thanks for your answer!

The coloring is my desperate attempt to recognize the grid-areas in order fix the problem. Those “marks” will go when everything is working.

Your solution clear the gap between the grid inside the .content grid area. I’m testing my code in Chromium, Firefox and Brave and I see this empty gap at top and bottom of content. In my computer I have to scroll down to find the beginning of the page. In other words, there is an empty gap between orange header, gray content and purple footer.

Once again, let me thank you for help.
Sorry for my english. It is not my mother tongue.