Position fixed by different screen resolution - css

Question

I have problem with the fixed div box with different screen size, the box is look perfect when the resolution is in 1366*768, but if the screen goes to bigger or smaller resolution, the box is running out of its position, which is not aligned with the container, as illustrate of the below image.
Could it be properly place and align the box with different screen resolution?
*Note: The div box will shrink to edge when the page is scrolling down.
Fixed div:
<a href="#" data-toggle="modal" data-target="#modalBox">
<div class="adv"><span">Big Hi to World</span></div>
</a>
CSS:
.container {
width: 1054px;
}
.adv {
position: fixed;
top: 12px;
right: 12%;
width: 230px;
height: 56px;
background-color: #348cb2;
text-align: center;
z-index: 9998;
}
.adv:hover {
background-color: #6fc7bb;
}
.adv span {
display: block;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 26px;
font-weight: 300;
color: #fff;
padding: 12px;
line-height: 110%;
}
.adv-ts {
right: 0;
width: 48px;
height: 48px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 1.0;
}
.adv-ts span {
display: none;
}
.adv-ts:after {
content: "Hi";
font-size: 28px;
color: #fff;
padding: 13px 11px;
display: block;
}
Appreciate for solution!

Answer 1

Try using CSS media queries
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
With each screen size change the position of the adv