0

I am very new to web development and I am experiencing an issue with CSS grid and hop the community can help to solve it.

I have created a layout with CSS grid and now I cannot get rid of unnecessary gaps in all sides of the grid: Header, Footer, Left, and Right sides. Please see the screenshot: [https://prnt.sc/rgcas4][1]

CSS Style

.grid-container{
    display: grid;
    grid-template-columns: 11% 55% 23% 11%;
    grid-template-rows: auto auto auto;
}

.header-container{
    background-image: linear-gradient(to bottom, #008686, #024848);
    grid-column: 1 / span 4;
    grid-row: 1;
    height: 60px;
    border: 1px solid black;
}

.left-spacing{
    background-color: grey;
    grid-column: 1;
    grid-row: 2;
    margin-top: 15px;
    z-index: -1;
    height: 800px;
    border: 1px solid black;
}

.central-container{
    grid-column: 2;
    grid-row: 2;
    margin-top: 15px;
    background-color: seashell;
    height: 800px;
    border: 1px solid black;
}

.right-menu-container{
    grid-column: 3;
    grid-row: 2;
    margin-left: 15px;
    margin-top: 15px;
    background-color: steelblue;
    height: 800px;
    border: 1px solid black;
}

.right-spacing{
    background-color: grey;
    grid-column: 4;
    grid-row: 2;
    margin-top: 15px;
    z-index: -1;
    height: 800px;
    border: 1px solid black;
}

.footer-container{
    background-color: lightcyan;
    grid-column: 1 / span 4;
    grid-row: 3;
    margin-top: 15px;
    height: 300px;
    border: 1px solid black;
}

HTML

<body>

    <div class="grid-container">

        <div class="header-container">Header</div>
        <div class="left-spacing">Left Spacing</div>
        <div class="central-container">Center</div>
        <div class="right-menu-container">Right Menu</div>
        <div class="right-spacing">Right Spacing</div>
        <div class="footer-container">Footer</div>

    </div>

</body>

I have tried multiple methods to remove the gap, such as:

margin: 0px top:0px;

etc, nothing helped

Thanks in advance for your assistance.

370147
  • 57
  • 5

1 Answers1

0

Here is what you need to add to your CSS:

body {
  margin: 0;
}

Or you can use CSS * selector at the top of your CSS to reset all the default margins and paddings:

* {
  margin: 0;
  padding: 0;
}