webpage not take max screen width?-CodePudding

I cant seem to make my webpage take max width and height, for some reason. I have tried various sizing properties of the html, body and div tags but no avail. Does anyone know why? I tried other browsers apart from current Chrome and Edge but get similar effect, it seems to have this white space or border running all around the whole webpage.

.html {
  height: 100%;
  width: 100%
}

.body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

.main {
  display: grid;
  /* grid-gap: 10px; */
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 100px;
  background-color: #e4e4e4;
  height: 100vh;
  /* width: 100vw; */
  /* max-width: 100%; */
  /* outline: 3px dashed black */
}

[class^='ma'] {
  /* display: grid; */
  /* outline: 3px solid black; */
  border: 1px solid black;
}

.navbar {
  background-color: rgba(187, 233, 239, 0.931);
}

.navbar_top {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 55px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
  <title>GameKongWebsite</title>
  <link rel="stylesheet" href="mystyle.css">

  <script src="index.js"></script>
</head>

<body>
  <div >

    <div >

      <div >
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
      </div>

    </div>

    <div > why not maxed out</div>

    <div >hi</div>

  </div>
</body>

any help would be greatly appreciated.

Thank You

CodePudding user response：

Try to remove the body's margin

body {
    margin: 0;
}

And:

either use body{...} instead of .body{...}
or assign the body class to you body element: <body >

Same goes for html/.html

CodePudding user response：

I see the margin of the body tag is taking spaces. Can try to reset your css first or just remove the margin of the body tag screenshot

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}