I am currently experiencing an issue where the content keeps scrolling to the right with the page when resized. I would like it to remain in the same position when resized. To help illustrate the problem, I have created a Codepen. It seems that the div containing the p tags is not behaving as fixed and instead the p tags are adjusting based on the page size.
<div id = "contents">
<div class = "add" align = "center">
<p id = "entry" style = "position: fixed; margin-left:1163px; margin-top:415px;">One</p>
</div>
</div>
CSS
#contents .add{
width: 1600px;
height: 750px;
margin: auto;
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
font-family: "Cedarville Cursive","Lato";
}
#contents{
width: 1600px;
height: 750px;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
font-family: "Cedarville Cursive","Lato";
}