div not streaching to the very top of the body

Question

Here's my code:

html,body, #main_div{
   height: 100%;
}
        body {
      background-color: #1862A1;
      background-image: linear-gradient(90deg, #1862A1, #8529B1);
      padding-left: 20%;
      padding-right: 20%;
    }
        #main_div{
      background-color: white;
    buttom: 0;
    height: 100%;
    width: 100%;
        }

My website only has a <body> tag in its masterpage and a centered <div> in my home page, the problem is that the div doesn't stretch to the top of the body as seen in the picture:

Anyone has any ideas?

score 1 · Answer 1 · answered Feb 17 '21 at 08:00

body margin and padding 0 will solve the issue. So your updated code will be

html,body, #main_div{
   height: 100%;
}
        body {
      background-color: #1862A1;
      background-image: linear-gradient(90deg, #1862A1, #8529B1);
      padding-left: 20%;
      padding-right: 20%;
      margin: 0;
      padding: 0;
    }
        #main_div{
      background-color: white;
    buttom: 0;
    height: 100%;
    width: 100%;
        }

div not streaching to the very top of the body

1 Answers1