Custom Positioned Images change on different screen sizes - HTML/CSS - html

Question

I am making a website on my laptop and I have positioned images in a certain way, but when I look at it on my PC the images are still in the shape just not in the center of the page there to the right more.
Heres the HTML:
<div id="puzzle">
<a href="teeth.html">
<IMG STYLE="position:absolute; TOP:35px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="TeethGrinding.jpg"" title="Bruxism - Teeth Clenching & Grinding - Click here for more info!">
</a>
<a href="weight.html">
<IMG STYLE="position:absolute; TOP:35px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="weightloss.png"" title="Weight Loss (VGB)- Click here for more info!">
</a>
<a href="alcohol.html">
<IMG STYLE="position:absolute; TOP:35px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="achol.png"" title="Alcohol Problems - Click here for more info!">
</a>
<a href="stress.html">
<IMG STYLE="position:absolute; TOP:215px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="stress.png"" title="Stress & Anxiety - Click here for more info!">
</a>
<a href="child.html">
<IMG STYLE="position:absolute; TOP:215px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="child.png"" title="Hypnotherapy for Children - Click here for more info!">
</a>
<a href="sleep.html">
<IMG STYLE="position:absolute; TOP:215px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="sleep.png"" title="Insonmia & Sleep Disorders - Click here for more info!">
</a>
<a href="fear.html">
<IMG STYLE="position:absolute; TOP:395px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="fear.png" title="Fears & Phobias - Click here for more info!">
</a>
<a href="sport.html">
<IMG STYLE="position:absolute; TOP:395px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="sportpuzzel.png"" title="Sport Hypnotherapy - Click here for more info!">
</a>
<a href="smoking.html">
<IMG STYLE="position:absolute; TOP:395px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="smoker.png"" title="Stop Smoking - Click here for more info!">
</a>
</div>
Here is the css:
#puzzle
{
background-color:white;
background-position: center;
background-size: cover;
float:center;
font-weight: 300;
color: black;
position:center;
text-align:center;
line-height: 25px;
width:100%;
overflow-x: hidden;
overflow-y: hidden;
height:685px;
word-spacing:3px;
position:relative;
}
Anyone know how to fix this?

Answer 1

There's quite a bit of invalid CSS for #puzzle. On top of that, you did not provide enough for me to actually test this. However I can give you an example of (my personal favorite) a common method to center a block element vertically, horizontally, or both.
For this method to work, we need to set a fixed width and (depending if vertically centered) height. The trick is to set the block element's left and top to 50% of the screen, and then use negative margin values to pull it back into place, by half of what we know the element's fixed size to be.
#centered {
background-color:#000;
height:75px;
left:0px;
position:absolute;
top:0px;
width:75px;
}
#centered > span {
display:block;
height:25px;
position:absolute;
width:25px;
}
#centered.horizontally { left:50%; margin-left:-37px; }
#centered.vertically { margin-top:-37px; top:50%; }
#one { background-color:#f00; left:0px; top:0px; }
#two { background-color:#0f0; left:25px; top:0px; }
#three { background-color:#00f; left:50px; top:0px; }
#four { background-color:#ff0; left:0px; top:25px; }
#five { background-color:#f0f; left:25px; top:25px; }
#six { background-color:#0ff; left:50px; top:25px; }
#seven { background-color:#333; left:0px; top:50px; }
#eight { background-color:#777; left:25px; top:50px; }
#nine { background-color:#aaa; left:50px; top:50px; }
<div class="horizontally vertically" id="centered">
<span id="one"></span><span id="two"></span><span id="three"></span>
<span id="four"></span><span id="five"></span><span id="six"></span>
<span id="seven"></span><span id="eight"></span><span id="nine"></span>
<div>
I hope you can use this example explains this simple method well enough, to be able to easily apply it to your own project(s).