div shifting to right whenever the browser window is scaled down - html

Question

just practicing with css dropdown. In the following code, the .container div (blue colored one) contains the child dropdown div .dropdown (green colored one, I have disabled this color to avoid confusion). The container div is perfectly horizontally aligned to its above div .content-small (red colored one). Since I want the position and margins of all the div's to be mantained whenever I scale down the browser window, I used left: 41.66%; in percentage so that the container div should stay aligned to its top red div.
The container div stays aligned, but whenever the window is scaled down to lowest size, the container div shifts slightly to the right. PLEASE see the attached screenshot. Why is that?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
left: 41.66%;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>

Answer 1

That's because you're saying left: 41.66%;, which is not an accurate way to center. Instead, use this:
CSS
.container {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
JSFiddle