Constructing an overlay with a stylized container for text, but encountering an issue where the container is creating a margin that, when combined with the normal width of the elements, occupies the entire width of the parent element. Chrome dev tools indicate that the .flipcontainer element is responsible for this.
This behavior is quite odd and I am unable to determine the reason behind it.
Because of this margin being generated, if I wanted to position content to the right of the container, I would not be able to do so.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>