Cant remove the margin of a div inside a div - html

Question

I'm doing a simple exercise with margin and padding, it should look something like this:
I tried to do it by setting the padding of the outer div to a fix value and setting the margin of the inner div to 0. But my result looks like this:
Inspector in google shows a margin to the right of the inner div, I have no idea where it comes from.
Here are the html and css codes
#box1,
#box2,
#box3,
#box4 {
width: 200px;
height: 200px;
border-width: 4px;
border-style: solid;
margin: 8px;
/* Aufgabe 2 */
display: inline-block;
/* Aufgabe 3 */
padding: 50px;
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
#inbox1,
#inbox2,
#inbox3,
#inbox4 {
width: 100px;
height: 100px;
/* Aufgabe 3 */
margin: 0px;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1">
<div id="inbox1"></div>
</div>
<div id="box2">
<div id="inbox2"></div>
</div>
<div id="box3">
<div id="inbox3"></div>
</div>
<div id="box4">
<div id="inbox4"></div>
</div>
Can someone explain where that margin comes from and how I can get rid of it?

Answer 1

It's not margin, it's just the size of your elements. Your boxes have an explicit width of 200px while the inboxes have an explicit width of 100px. So the extra space is due to that difference.
You should also use classes to share styles between elements:
.box {
border-width: 4px;
border-style: solid;
margin: 8px;
display: inline-block;
padding: 50px;
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
.inbox {
width: 100px;
height: 100px;
margin: 0px;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1" class="box">
<div id="inbox1" class="inbox"></div>
</div>
<div id="box2" class="box">
<div id="inbox2" class="inbox"></div>
</div>
<div id="box3" class="box">
<div id="inbox3" class="inbox"></div>
</div>
<div id="box4" class="box">
<div id="inbox4" class="inbox"></div>
</div>

Answer 2

I believe your issue resulted from providing additional width and height, and padding in order to create a gap around the inner box - you should only use one of these methods!
The following code reduces the size of the parent to 100 x 100, and sets the size of the child to 100% of its parent. Then, the padding alone creates the gap:
.box {
width: 100px;
height: 100px;
border-width: 4px;
border-style: solid;
margin: 8px;
display: inline-block;
padding: 50px;
}
.box1 { border-color: red; }
.box2 { border-color: green; }
.box3 { border-color: violet; }
.box4 { border-color: yellow; }
.inbox {
width: 100%; height: 100%;
}
.inbox1 { background-color: royalblue; }
.inbox2 { background-color: pink; }
.inbox3 { background-color: black; }
.inbox4 { background-color: turquoise; }
<div class="box box1">
<div class="inbox inbox1"></div>
</div>
<div class="box box2">
<div class="inbox inbox2"></div>
</div>
<div class="box box3">
<div class="inbox inbox3"></div>
</div>
<div class="box box4">
<div class="inbox inbox4"></div>
</div>

Answer 3

You can center horizontally and vertically adding flexbox (modern solution) to each box container, if you want to support older browser see this.
As other answers suggested add classes to your css for better readability and more.
In addition be aware of the dimensions of the boxes.
Here is the solution:
#box1,
#box2,
#box3,
#box4 {
width: 200px;
height: 200px;
border-width: 4px;
border-style: solid;
margin: 8px;
/* Aufgabe 3 */
padding: 50px;
/* ADD THIS */
display: inline-flex;
justify-content: center;
align-items: center;
/* END ADD THIS */
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
#inbox1,
#inbox2,
#inbox3,
#inbox4 {
width: 100px;
height: 100px;
margin: 0;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1">
<div id="inbox1"></div>
</div>
<div id="box2">
<div id="inbox2"></div>
</div>
<div id="box3">
<div id="inbox3"></div>
</div>
<div id="box4">
<div id="inbox4"></div>
</div>
Hope it helps :)