I'm building my first independent project and getting some extra space around my chessboard that I don't want. Can anyone tell me what's going on here?

HTML-CSS
1

I’m sure I’ll have more questions but basically, I’m getting a little extra space on the right side of my chessboard and I can’t seem to get rid of it. Perhaps I’m using insufficient methods to achieve the results I want? How should I code this instead to get that border snatched to my parent div, or possibly, what mistake did I make that I’m not aware of?

<!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>CHESS IS COOL</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>PLAY CHESS LOSER</h1>
    <div class="parent">
        <div class="black">a8</div>
        <div class="white">b8</div>
        <div class="black">c8</div>
        <div class="white">d8</div>
        <div class="black">e8</div>
        <div class="white">f8</div>
        <div class="black">g8</div>
        <div class="white">h8</div>
        <div class="white">a7</div>
        <div class="black">b7</div>
        <div class="white">c7</div>
        <div class="black">d7</div>
        <div class="white">e7</div>
        <div class="black">f7</div>
        <div class="white">g7</div>
        <div class="black">h7</div>
        <div class="black">a6</div>
        <div class="white">b6</div>
        <div class="black">c6</div>
        <div class="white">d6</div>
        <div class="black">e6</div>
        <div class="white">f6</div>
        <div class="black">g6</div>
        <div class="white">h6</div>
        <div class="white">a5</div>
        <div class="black">b5</div>
        <div class="white">c5</div>
        <div class="black">d5</div>
        <div class="white">e5</div>
        <div class="black">f5</div>
        <div class="white">g5</div>
        <div class="black">h5</div>
        <div class="black">a4</div>
        <div class="white">b4</div>
        <div class="black">c4</div>
        <div class="white">d4</div>
        <div class="black">e4</div>
        <div class="white">f4</div>
        <div class="black">g4</div>
        <div class="white">h4</div>
        <div class="white">a3</div>
        <div class="black">b3</div>
        <div class="white">c3</div>
        <div class="black">d3</div>
        <div class="white">e3</div>
        <div class="black">f3</div>
        <div class="white">g3</div>
        <div class="black">h3</div>
        <div class="black">a2</div>
        <div class="white">b2</div>
        <div class="black">c2</div>
        <div class="white">d2</div>
        <div class="black">e2</div>
        <div class="white">f2</div>
        <div class="black">g2</div>
        <div class="white">h2</div>
        <div class="white">a1</div>
        <div class="black">b1</div>
        <div class="white">c1</div>
        <div class="black">d1</div>
        <div class="white">e1</div>
        <div class="black">f1</div>
        <div class="white">g1</div>
        <div class="black">h1</div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

body {
    margin:30px;
}

h1 {
    margin: auto;
    width: 50%;
    padding: 10px;
    font-size: 72px;
    font-family: sans-serif;
}

.parent {
    margin: auto;
    width: 50%;
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 75px 75px 75px 75px 75px 75px 75px 75px;
    grid-template-rows: 75px 75px 75px 75px 75px 75px 75px 75px;
}

.white {
    background-color:white;
    color: black;
}

.black {
    background-color:black;
    color:white;
}
2

Hey, you can use this if it works with the code you already have.
container and margin-right set to 0

3

You have given the width of the parent div to be 50%.

This makes it 50% of the entire body. That is why, you are getting an extra space on the right side of the chessboard.

You could calculate a fixed width, as the grid layout is of a fixed width.

Alternatively, you could use ‘fit-content’ as the value for width for a more responsive parent container (although the grid is of a fixed width). This will make the container use only the required amount of space.

4

Thank you for explaining that so I understand why it is happening, this is extremely helpful! I found an alternative solution which I’ll share here:

body {
    margin:30px;
}

h1 {
    margin: auto;
    width: max-content;
    padding: 10px;
    font-size: 72px;
    font-family: sans-serif;
}

button {
    display: block;
    margin-top: 10px;
    margin-left: 47%;
    margin-right: 0%;
    margin-bottom: 10px;
    width: max-content;
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray;
    padding: 10px;
    font-size: 20px;
    font-family: sans-serif;
}

.chessboard {
    margin: auto;
    width: max-content;
    border-top: 3px solid gray;
    border-left: 3px solid gray;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(8, 75px);
    grid-template-rows: repeat(8, 75px);
}

.white {
    background-color:white;
    color: black;
}

.black {
    background-color:black;
    color:white;
}
1 Like