CSS, div positioning went wrong

Question

Hey I'm doing some CSS battles like always! I found help in here making the plus sign, but I'm not used too much to absolute and block, so my question is how to separate the rules between my gift.div and the pap div which is at top!? As you see the left rule in pap is lefting all the divs?

Here's the code :

<div id="pap">
<div id="box"><style>
*{background:#ac474b;}
#box {
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  position: relative;
  margin: auto;
   top: 102px;}
#box::after{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    height: 20px;
    top: 43%;
    left : 0px; 
    Right: 0px;
}
#box::before{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    width: 20px;
    left: 43%;
    top : 0px; 
    bottom: 0px;}
#pap{
    width:20px;
    height: 20px;
    background: #ffffff; 
  position: relative;
    left: 122px;
  }

Here's the link in case you want to try it live! https://cssbattle.dev/play/99

Answer 1

It seems that your div elements are missing their closing tags.

Once added, everything should work just fine.

*{background:#ac474b;}

#box {
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  position: relative;
  margin: auto;
   top: 102px;
}
#box::after{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    height: 20px;
    top: 43%;
    left : 0px; 
    Right: 0px;
}
#box::before{
    content: " ";
    position: absolute;
    display: block;
    background: #AC474B;
    width: 20px;
    left: 43%;
    top : 0px; 
    bottom: 0px;
}
#pap{
    width:20px;
    height: 20px;
    background: #ffffff; 
    position: relative;
    margin: auto;
    top: calc(102px - 20px);
}

<div id="pap"></div>
<div id="box"></div>