Is there a way to extend height more than 100%?

Question

I'd like to have a little bit more space at the end of the screen but I already set my height to 100% for the background color. I want to add more space with the same background color. This is how it looks now. I set the height of div with classname "project-main-box", which contains every element for the page, I set its height to 100%. I tried adding margin-bottom for the main-container div, which contains elements for each box, but it only adds a white space.

My code

ProjectMain.js

import React, { Component } from "react";
import ProjectBox from "./ProjectBox";
import Covid19 from "../../Images/covid19-proj.jpg";
import Spotify from "../../Images/spotify-logo.jpg";
import FormValidation from "../../Images/form-validation.png";

export class ProjectMain extends Component {
  render() {
    return (
      <div className="project-main-box">
        <div className="project-header">
          <div className="header-wrapper">
            <div className="project-bullet"></div>
            <div className="project-name">Projects</div>
            <h4>You can see the websites if you click them</h4>
          </div>
        </div>
        <ProjectBox
          title="Spotify"
          img={Spotify}
          url="https://spotify-search-app.herokuapp.com/"
          description="You can search artists and see their albums and tracks. It will direct you to Spotify website when you click the play button"
          stacks={[
            "ReactJS",
            "Bootstrap",
            "NodeJS / Express",
            "Spotify API",
            "Heroku",
          ]}
        />
        <ProjectBox
          title="CoronaTrace"
          img={Covid19}
          url="https://coronatrace-app.herokuapp.com/"
          description="A website that shows current COVID-19 cases across the states in the US with graphs and a table."
          stacks={[
            "ReactJS",
            "Bootstrap",
            "NodeJS / Express",
            "MongoDB Atlas",
            "Reacharts",
            "Heroku",
          ]}
        />
        <ProjectBox
          title="Form Validation"
          img={FormValidation}
          url="https://heuristic-bohr-3c4412.netlify.app/"
          description="A simple form validation app that checks username, email, and passwords."
          stacks={["Javascript", "CSS", "HTML"]}
        />
      </div>
    );
  }
}

ProjectBox.js

export class ProjectBox extends Component {
  render() {
    return (
      <div className="main-container">
        <div className="proj-description">
          <div className="description-header">
            <h4>{this.props.title}</h4>
          </div>
          <p>{this.props.description}</p>
          <div className="stacks">
            <h6>Stacks Used: </h6>
            <ul>
              {this.props.stacks.map((stack) => {
                return <li key={stack}>{stack}</li>;
              })}
            </ul>
          </div>
        </div>
        <div className="img-container">
          <a href={this.props.url} target="_blank" rel="noopener noreferrer">
            <img
              src={this.props.img}
              height="100%"
              width="100%"
              alt="Img Not Found"
            ></img>
          </a>
        </div>
      </div>
    );
  }
}

App.scss

/* Projects Style */

.project-main-box {
  background-color: #ede7dd;
  padding: 0;
  margin: 0;
  height: 100%;

  // project header style
  .project-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .header-wrapper {
      padding: 0;
      margin: 70px 0 0 0;
      .project-bullet {
        @include bullet;
        margin-bottom: 4px;
        height: 20px;
        width: 20px;
      }
      .project-name {
        display: inline-block;
        margin-bottom: 40px;
        margin-left: 5px;
        font-size: 50px;
        font-weight: bold;
      }
    }
  }

  // ProjectBox Component Style
  .main-container {
    @include project-box;
    margin-top: 80px;

    .proj-description {
      display: inline-block;
      width: 55%;
      position: relative;
      height: 100%;

      .description-header {
        background: blue;
        width: 10px;
        height: 50px;
        position: absolute;
        margin-top: 50px;
        h4 {
          margin-left: 35px;
          font-weight: bold;
          color: blue;
        }
      }

      p {
        position: absolute;
        margin: 130px 30px 0px 30px;
      }

      .stacks {
        position: absolute;
        margin: 220px 30px;
      }
    }

    .img-container {
      width: 45%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
    }
  }
}

Answer 1

Your main div, whose class is "project-main-box" is also contained in the body element, which is also included in html. Instead of generating this main div, generate a body whose class would be your "project-main-box". A div has a default margin.

Answer 2

Remove default margin, padding and box-shadow and give height: "100vh" and it will fit screen size accordingly.

Answer 3

What's about padding: 0; try to increase their value;