Search code examples
htmlcssfrontendhoverweb-frontend

Hover is triggered outside of the it's border. HTML and CSS

Image of the webbsite

So I am currently making an advent calendar in HTML and am currently expecting a problem with my hover. Hover is triggered even when I am not hovering inside of the box. Here is a video that shows it better: https://screenrec.com/share/v76Y25PkzO

HTML code:

<!DOCTYPE html>

<html>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Julkalender 2023</title>
    
    <link rel="icon" type="image/x-icon" href="bilder/bauble.ico">
    
    </head>
    <body>
        
        <div class="ramen">
        
            <div class="rad_1">
            
                <div class="luck_1">
                
                    <div class="luck_pane_1">
                    
                            <p class="lucka_1">1</p> 
                            
                    </div>
                        
                            <div class="luck_content_1">
                        
                                <div class="luck_bauble_1"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                    <div class="luck_2">
                    
                        <div class="luck_pane_2">
                
                            <p class="lucka_2">2</p> 
                        
                    </div>
                    
                        <div class="luck_content_2">
                        
                            <div class="luck_bauble_2"> test </div>
                            
                        </div>
                    
                </div>
                
                <div class="luck_3">
                    
                    <div class="luck_pane_3">
                
                        <p class="lucka_3">3</p> 
                        
                    </div>
                    
                    <div class="luck_content_3">
                    
                        <div class="luck_bauble_3"> test </div>
                        
                    </div>
                    
                </div>
                
                <div class="luck_4">
                    
                    <div class="luck_pane_4">
                
                        <p class="lucka_4">4</p> 
                        
                    </div>
                    
                    <div class="luck_content_4">
                    
                        <div class="luck_bauble_4"> test </div>
                        
                    </div>
                    
                </div>
                
                <div class="luck_5">
                    
                    <div class="luck_pane_5">
                
                        <p class="lucka_5">5</p> 
                        
                    </div>
                    
                    <div class="luck_content_5">
                    
                        <div class="luck_bauble_5"> test </div>
                        
                    </div>
                    
                </div>
                
                <div class="luck_6">
                    
                    <div class="luck_pane_6">
                
                        <p class="lucka_6">6</p> 
                        
                    </div>
                    
                    <div class="luck_content_6">
                    
                        <div class="luck_bauble_6"> test </div>
                        
                    </div>
                    
                </div>
                
                <div class="luck_7">
                    
                    <div class="luck_pane_7">
                
                        <p class="lucka_7">7</p> 
                        
                    </div>
                    
                    <div class="luck_content_7">
                    
                        <div class="luck_bauble_7"> test </div>
                        
                    </div>
                    
                </div>
                
                <div class="luck_8">
                    
                    <div class="luck_pane_8">
                
                        <p class="lucka_8">8</p> 
                        
                    </div>
                    
                    <div class="luck_content_8">
                    
                        <div class="luck_bauble_8"> test </div>
                        
                    </div>
                    
                </div>
            
            </div>
            
            <div class="rad_2">
            
                <div class="luck_9">
                
                    <div class="luck_pane_9">
                    
                            <p class="lucka_9">9</p> 
                            
                    </div>
                        
                            <div class="luck_content_9">
                        
                                <div class="luck_bauble_9"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_10">
                
                    <div class="luck_pane_10">
                    
                            <p class="lucka_10">10</p> 
                            
                    </div>
                        
                            <div class="luck_content_10">
                        
                                <div class="luck_bauble_10"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_11">
                
                    <div class="luck_pane_11">
                    
                            <p class="lucka_11">11</p> 
                            
                    </div>
                        
                            <div class="luck_content_11">
                        
                                <div class="luck_bauble_11"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_12">
                
                    <div class="luck_pane_12">
                    
                            <p class="lucka_12">12</p> 
                            
                    </div>
                        
                            <div class="luck_content_12">
                        
                                <div class="luck_bauble_12"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_13">
                
                    <div class="luck_pane_13">
                    
                            <p class="lucka_13">13</p> 
                            
                    </div>
                        
                            <div class="luck_content_13">
                        
                                <div class="luck_bauble_13"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_14">
                
                    <div class="luck_pane_14">
                    
                            <p class="lucka_14">14</p> 
                            
                    </div>
                        
                            <div class="luck_content_14">
                        
                                <div class="luck_bauble_14"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_15">
                
                    <div class="luck_pane_15">
                    
                            <p class="lucka_15">15</p> 
                            
                    </div>
                        
                            <div class="luck_content_15">
                        
                                <div class="luck_bauble_15"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_16">
                
                    <div class="luck_pane_16">
                    
                            <p class="lucka_16">16</p> 
                            
                    </div>
                        
                            <div class="luck_content_16">
                        
                                <div class="luck_bauble_16"> test </div>
                            
                            </div>
                    
            
                
                </div>
            
            </div>
            
            <div class="rad_3">
            
                <div class="luck_17">
                
                    <div class="luck_pane_17">
                    
                            <p class="lucka_17">17</p> 
                            
                    </div>
                        
                            <div class="luck_content_17">
                        
                                <div class="luck_bauble_17"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
            <div class="luck_18">
                
                    <div class="luck_pane_18">
                    
                            <p class="lucka_18">18</p> 
                            
                    </div>
                        
                            <div class="luck_content_18">
                        
                                <div class="luck_bauble_18"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_19">
                
                    <div class="luck_pane_19">
                    
                            <p class="lucka_19">19</p> 
                            
                    </div>
                        
                            <div class="luck_content_19">
                        
                                <div class="luck_bauble_19"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_20">
                
                    <div class="luck_pane_20">
                    
                            <p class="lucka_20">20</p> 
                            
                    </div>
                        
                            <div class="luck_content_20">
                        
                                <div class="luck_bauble_20"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_21">
                
                    <div class="luck_pane_21">
                    
                            <p class="lucka_21">21</p> 
                            
                    </div>
                        
                            <div class="luck_content_21">
                        
                                <div class="luck_bauble_21"> test </div>
                            
                            </div>
                    
            
                
                </div>
                
                <div class="luck_22">
                    
                        <div class="luck_pane_22">
                
                            <p class="lucka_22">22</p> 
                        
                    </div>
                    
                        <div class="luck_content_22">
                        
                            <div class="luck_bauble_22"> test </div>
                            
                        </div>
                    
                </div>
                
                <div class="luck_23">
                    
                        <div class="luck_pane_23">
                
                            <p class="lucka_23">23</p> 
                        
                    </div>
                    
                        <div class="luck_content_23">
                        
                            <div class="luck_bauble_23"> test </div>
                            
                        </div>
                    
                </div>
                
                <div class="luck_24">
                    
                        <div class="luck_pane_24">
                
                            <p class="lucka_24">24</p> 
                        
                    </div>
                    
                        <div class="luck_content_24">
                        
                            <div class="luck_bauble_24"> test </div>
                            
                        </div>
                    
                </div>
            
            </div>
        
        </div>

    </body>
<HTML>


* 
{
    padding: 0px;
    margin: 0px;
    width: 2560px;
    max-height: 100vh;

}

body
{
    overflow: hidden;
}

p
{

    color: white;
    font-family: Brush Script MT,cursive; 
    font-size: 45px;
    font-weight: bold;
    
}

.ramen
{
    width: 95%;
    min-height: 95vh;
    border: 1px solid black;
    border-radius: 15px;
    margin: auto;
    margin-top: 2.5vh;
    background-color: #bf0000;
    
    
    
}

.rad_1
{
    margin-top: 113px;
    margin-left: 60px;
    display: flex;
    flex-wrap: wrap;
    
    
}

.rad_1 p
{
    padding-left: 250px;
}

.luck_1 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_1 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_1,
.luck_content_1
{
  width: inherit;
  height: inherit;
}

.luck_pane_1 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_1:hover .luck_pane_1
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_1
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_1  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}


.luck_2 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_2 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
 
  
}

.luck_pane_2,
.luck_content_2
{
  width: inherit;
  height: inherit;
}

.luck_pane_2 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_2:hover .luck_pane_2
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_2
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_2  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_3 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_3 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_3,
.luck_content_3
{
  width: inherit;
  height: inherit;
}

.luck_pane_3 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_3:hover .luck_pane_3
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_3
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_3  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px; 
}

.luck_4 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_4 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_4,
.luck_content_4
{
  width: inherit;
  height: inherit;
}

.luck_pane_4 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_4:hover .luck_pane_4
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_4
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_4  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_5 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_5 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_5,
.luck_content_5
{
  width: inherit;
  height: inherit;
}

.luck_pane_5 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_5:hover .luck_pane_5
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_5
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_5  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_6 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_6 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_6,
.luck_content_6
{
  width: inherit;
  height: inherit;
}

.luck_pane_6 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_6:hover .luck_pane_6
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_6
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_6  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_7 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_7 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_7,
.luck_content_7
{
  width: inherit;
  height: inherit;
}

.luck_pane_7 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_7:hover .luck_pane_7
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_7
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_7  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_8 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_8 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;

  
}

.luck_pane_8,
.luck_content_8
{
  width: inherit;
  height: inherit;
}

.luck_pane_8 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_8:hover .luck_pane_8
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_8
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_8  /* Innehåll vid öppning */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_1,
.luck_2,
.luck_3,
.luck_4,
.luck_5,
.luck_6,
.luck_7,
.luck_8
{
    margin-right: 40px;


}

.rad_2
{
    margin-top: 113px;
    margin-left: 60px;
    display: flex;
}

.rad_2 p
{
    padding-left: 95px;
}

.luck_9 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_9 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_9,
.luck_content_9
{
  width: inherit;
  height: inherit;
}

.luck_pane_9 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_9:hover .luck_pane_9
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_9
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_9  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_10 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_10 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_10,
.luck_content_10
{
  width: inherit;
  height: inherit;
}

.luck_pane_10 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_10:hover .luck_pane_10
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_10
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_10  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_11 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_11 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_11,
.luck_content_11
{
  width: inherit;
  height: inherit;
}

.luck_pane_11 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_11:hover .luck_pane_11
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_11
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_11  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}
.luck_12 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_12 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_12,
.luck_content_12
{
  width: inherit;
  height: inherit;
}

.luck_pane_12 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_12:hover .luck_pane_12
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_12
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_12 /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}
.luck_13 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_13 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_13,
.luck_content_13
{
  width: inherit;
  height: inherit;
}

.luck_pane_13 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_13:hover .luck_pane_13
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_13
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_13  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}
.luck_14 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_14 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_14,
.luck_content_14
{
  width: inherit;
  height: inherit;
}

.luck_pane_14 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_14:hover .luck_pane_14
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_14
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_14  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}
.luck_15 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_15 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_15,
.luck_content_15
{
  width: inherit;
  height: inherit;
}

.luck_pane_15 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_15:hover .luck_pane_15
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_15
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_15  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.luck_16 /* ramen för luckan*/
{
    width: 250px;
    height: 250px;
    border: 2px solid black;
    perspective: 850px;
    display: inline-block;
    margin-right: 40px;
    
}

.lucka_16 /* siffran på framsidan*/ 
{
  position: absolute;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 63px;
  
}

.luck_pane_16,
.luck_content_16
{
  width: inherit;
  height: inherit;
}

.luck_pane_16 /* Framsidan*/
{
  position: relative;
  background: #bf0000;
  transform-style: preserve-3d;
  transform-origin: 0;
  perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  transition: all .2s ease-out;
 
}

.luck_16:hover .luck_pane_16
{
  cursor:pointer;
  transform: rotateY(-155deg);
  perspective-origin: 0;
  transition: all 0.25s ease-in;    
}

.luck_content_16
{
  background: SlateBlue;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;  
}

.luck_bauble_16  /*Stylar siffran inuti */
{
 
  font-size: 2.6666666667em;
  line-height: 2.6666666667em;
  color: white;
  margin-left: 65px;
  margin-top: 60px;
}

.lucka_9,
.lucka_10,
.lucka_11,
.lucka_12,
.lucka_13,
.lucka_14,
.lucka_15,
.lucka_16
{
    margin-right: 40px;

Full CSS code here: https://pastebin.com/4EqSvvJD

Solution

  • I have change some css class property value i think help this css code for solve your issue. Try it:

    * {
  padding:0;
  margin:0;
  width:2560px;
  max-height:100vh
  }
  
  body {
  overflow:hidden
  }
  
  p {
  color:#fff;
  font-family:Brush Script MT,cursive;
  font-size:45px;
  font-weight:700
  }
  
  .ramen {
  width:95%;
  min-height:95vh;
  border:1px solid #000;
  border-radius:15px;
  margin:2.5vh auto auto;
  background-color:#bf0000
  }
  
  .rad_1 {
  margin-top:113px;
  margin-left:60px;
  display:flex;
  flex-wrap:wrap
  }
  
  .luck_1,.luck_2,.luck_3,.luck_4,.luck_5,.luck_6,.luck_7,.luck_8 {
  width:250px;
  height:250px;
  border:2px solid #000;
  perspective:850px;
  display:inline-block
  }
  
  .luck_content_1,.luck_content_10,.luck_content_11,.luck_content_12,.luck_content_13,.luck_content_14,.luck_content_15,.luck_content_16,.luck_content_17,.luck_content_18,.luck_content_19,.luck_content_2,.luck_content_20,.luck_content_21,.luck_content_22,.luck_content_23,.luck_content_24,.luck_content_3,.luck_content_4,.luck_content_5,.luck_content_6,.luck_content_7,.luck_content_8,.luck_content_9,.luck_pane_1,.luck_pane_10,.luck_pane_11,.luck_pane_12,.luck_pane_13,.luck_pane_14,.luck_pane_15,.luck_pane_16,.luck_pane_17,.luck_pane_18,.luck_pane_19,.luck_pane_2,.luck_pane_20,.luck_pane_21,.luck_pane_22,.luck_pane_23,.luck_pane_24,.luck_pane_3,.luck_pane_4,.luck_pane_5,.luck_pane_6,.luck_pane_7,.luck_pane_8,.luck_pane_9 {
  width:inherit;
  height:inherit
  }
  
  .luck_pane_1,.luck_pane_10,.luck_pane_11,.luck_pane_12,.luck_pane_13,.luck_pane_14,.luck_pane_15,.luck_pane_16,.luck_pane_17,.luck_pane_18,.luck_pane_19,.luck_pane_2,.luck_pane_20,.luck_pane_21,.luck_pane_22,.luck_pane_23,.luck_pane_24,.luck_pane_3,.luck_pane_4,.luck_pane_5,.luck_pane_6,.luck_pane_7,.luck_pane_8,.luck_pane_9 {
  position:relative;
  background:#bf0000;
  transform-style:preserve-3d;
  transform-origin:0;
  perspective:850px;
  text-align:center;
  box-shadow:0 0 40px 0 rgba(0,0,0,.15);
  transition:.2s ease-out
  }
  
  .luck_10:hover .luck_pane_10,.luck_11:hover .luck_pane_11,.luck_12:hover .luck_pane_12,.luck_13:hover .luck_pane_13,.luck_14:hover .luck_pane_14,.luck_15:hover .luck_pane_15,.luck_16:hover .luck_pane_16,.luck_17:hover .luck_pane_17,.luck_18:hover .luck_pane_18,.luck_19:hover .luck_pane_19,.luck_1:hover .luck_pane_1,.luck_20:hover .luck_pane_20,.luck_21:hover .luck_pane_21,.luck_22:hover .luck_pane_22,.luck_23:hover .luck_pane_23,.luck_24:hover .luck_pane_24,.luck_2:hover .luck_pane_2,.luck_3:hover .luck_pane_3,.luck_4:hover .luck_pane_4,.luck_5:hover .luck_pane_5,.luck_6:hover .luck_pane_6,.luck_7:hover .luck_pane_7,.luck_8:hover .luck_pane_8,.luck_9:hover .luck_pane_9 {
  cursor:pointer;
  transform:rotateY(-155deg);
  perspective-origin:0;
  transition:.25s ease-in
  }
  
  .luck_content_1,.luck_content_10,.luck_content_11,.luck_content_12,.luck_content_13,.luck_content_14,.luck_content_15,.luck_content_16,.luck_content_17,.luck_content_18,.luck_content_19,.luck_content_2,.luck_content_20,.luck_content_21,.luck_content_22,.luck_content_23,.luck_content_24,.luck_content_3,.luck_content_4,.luck_content_5,.luck_content_6,.luck_content_7,.luck_content_8,.luck_content_9 {
  background:#6a5acd;
  box-shadow:0 0 40px 0 rgba(0,0,0,.15),inset 0 0 30px 20px rgba(0,0,0,.15);
  z-index:-1;
  position:absolute;
  top:0;
  left:0
  }
  
  .luck_bauble_1,.luck_bauble_10,.luck_bauble_11,.luck_bauble_12,.luck_bauble_13,.luck_bauble_14,.luck_bauble_15,.luck_bauble_16,.luck_bauble_17,.luck_bauble_18,.luck_bauble_19,.luck_bauble_2,.luck_bauble_20,.luck_bauble_21,.luck_bauble_22,.luck_bauble_23,.luck_bauble_24,.luck_bauble_3,.luck_bauble_4,.luck_bauble_5,.luck_bauble_6,.luck_bauble_7,.luck_bauble_8,.luck_bauble_9 {
  font-size:2.6666666667em;
  line-height:2.6666666667em;
  color:#fff;
  margin-left:65px;
  margin-top:60px
  }
  
  .lucka_1,.lucka_10,.lucka_11,.lucka_12,.lucka_13,.lucka_14,.lucka_15,.lucka_16,.lucka_17,.lucka_18,.lucka_19,.lucka_2,.lucka_20,.lucka_21,.lucka_22,.lucka_23,.lucka_24,.lucka_3,.lucka_4,.lucka_5,.lucka_6,.lucka_7,.lucka_8,.lucka_9 {
  position:relative;
  color:#fff;
  width:100%;
  text-align:left;
  padding:15px 20px
  }
  
  .luck_1,.luck_2,.luck_3,.luck_4,.luck_5,.luck_6,.luck_7,.luck_8,.lucka_17,.lucka_18,.lucka_19,.lucka_20,.lucka_21,.lucka_22,.lucka_23,.lucka_24 {
  margin-right:40px
  }
  
  .rad_2,.rad_3 {
  margin-top:113px;
  margin-left:60px;
  display:flex
  }
  
  .luck_10,.luck_11,.luck_12,.luck_13,.luck_14,.luck_15,.luck_16,.luck_17,.luck_18,.luck_19,.luck_20,.luck_21,.luck_22,.luck_23,.luck_24,.luck_9 {
  width:250px;
  height:250px;
  border:2px solid #000;
  perspective:850px;
  display:inline-block;
  margin-right:40px
  }