What is wrong with this simple CSS and html chess layout? (Short code)

I am making a chessboard and my main problem is that after I set up the first two rows of the board, the pawn insertion alters the color of the dark squares.

So the board has the class "main" and is colored white, the squares(class="box) are either the same color as the board (white) or brown. The component (pawn) is an SVG. Upon adding the pawn ID to a square, it nullifies the squares color. This is fine for the white squares, but a problem with the brown squares.

here is the code

body {
  background-color: grey;
}

.main {
  height: 50%;
  width: 70%;
  margin: 10% 15%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.box {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.box:nth-child(even) {
  background: burlywood;
}

#pawn {
  background: url(https://svgsilh.com/svg/3413417.svg) center;
  background-size: cover;
}

<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <div class="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
    <div class="box" id="pawn"></div>
  </div>
</body>

</html>

Solution

If you want the height and width % to work, you should give a height and width to its parent, because thats what they will take as 100%. In this case you had % in main but not stated a width nor height in the body tag.

In this case you can't use those % so I used static px in order to do it faster and to not re-structure the html.

The problem you had with the backgrounds is that when you add an image as a background it overwrites the previous background, so in order to have a transparent image with a styled background you have to add it as content (img) of the container with that background.

I also changed the main class for the main tag and replaced id pawn as you should not have more that one tag with the same id, in other words, it should be unique, if you want to use more, use a class.

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
}

main {
  height: 100px;
  width: 450px;
  margin: 10% 15%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.box {
  height: 48px;
  width: 48px;
  border: 1px solid black;
}

.box:nth-child(even) {
  background: burlywood;
}

img{
width:100%;
height:100%;
}

<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>

  <main>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
    <div class="box"><img class="pawn" src="https://svgsilh.com/svg/3413417.svg" alt="pawn"></div>
  </main>
</body>

</html>