Help with css grid PLEASE

1

Hi all,
I’m another newbie and I’m having a problem trying to figure out what I’m doing wrong. I’m sure that the problem is with my padding.

This is my result:

screencapture-127-0-0-1-5500-index-html-1592424763238
screencapture-127-0-0-1-5500-index-html-15924247632381280×1498 2.86 KB

This is my css code:

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

body {
  background-color: white;
}

.space-one {
  background-color: #f5c6d6;
  display: inline-block;
  border: 1px rgb(0, 0, 0) solid;
  width: 100%;
  height: 200px;
  margin: 5px;
}

.space-two {
  background-color: #ee2e84;
  display: inline-block;
  border: 1px rgb(0, 0, 0) solid;
  width: 25%;
  height: 200px;
  margin: 5px;
}

.space-three {
  background-color: #ee2e84;
  display: inline-block;
  border: 1px rgb(0, 0, 0) solid;
  width: 25%;
  height: 200px;
  margin: 5px;
}

.space-four {
  background-color: #ee2e84;
  display: inline-block;
  border: 1px rgb(0, 0, 0) solid;
  width: 25%;
  height: 200px;
  margin: 5px;
}

.space-five {
  background-color: #ee2e84;
  display: inline-block;
  border: 1px black solid;
  width: 25%;
  height: 200px;
  margin: 5px;
}

.space-six {
  background-color: #e76e34;
  display: inline-block;
  border: 1px black solid;
  width: 50%;
  height: 200px;
  margin: 5px;
}

.space-seven {
  background-color: #e76e34;
  display: inline-block;
  border: 1px solid;
  width: 50%;
  height: 200px;
  margin: 5px;
}

.space-eight {
  background-color: #e76e34;
  display: inline-block;
  border: 1px solid;
  width: 75%;
  height: 200px;
  margin: 5px;
}

.space-nine {
  background-color: #e76e34;
  display: inline-block;
  border: 1px solid;
  width: 25%;
  height: 200px;
  margin: 5px;
}

This is my HTML code:

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/styles.css">
        <title>Document</title>
    </head>

    <body>
        <div>
            <span class="space-one"></span>
        </div>

        <div>
            <span class="space-two"></span>
            <span class="space-three"></span>
            <span class="space-four"></span>
            <span class="space-five"></span>
        </div>
        <div>
            <span class="space-six"></span>
            <span class="space-seven"></span>
        </div>
        <div>    
            <span class="space-eight"></span>
            <span class="space-nine"></span>
        </div>

    </body>

</html>
2

Hello there,

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

Also, you have not actually told us what you want…what is wrong with your result?

3

OK thankyou, I appologise for that.