I am very new to coding made my first html-site today. Started on my laptop but when I moved to my PC the layout was looking all messed up. Is there any way to fix this without going back and changing/looking at everything? I appreciate the help.
This is the code I have written. It looks great on my 10.2" (diagonal) screen. But looks horrible on my 22.9" (diagonal) screen.
<!DOCTYPE html><html><title>CV</title><style>/*Stylering o sånt shit*/.cirkel { height: 250px; width: 250px; border-radius: 50%; background-color: #A00000;}.text { color:white; padding: 105px 0px; font-family: 'Times New Roman', Times, serif; font-size: 35px;}#rektangel { height: 100px; width: 920px; background-color: #A00000; margin-top: -168px; border-radius: 53px;}.bild { border-radius: 50%; width: 220px; height: 220px; margin-top: -167px;}.button { text-align: center; transition-duration: 0.4s; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; padding: 24px 48px; border-radius: 5px; border: solid #333 2px; width: 163px; height: 50px; display: inline-flex; align-items: center; box-sizing: border-box;}#head { color:#fff; position:absolute; top: 108px; margin-left: 290px;}#head1 { color: #fff; margin-left: 844px; line-height: 4px; position: absolute; top: 97px;}#par{ font-family: Arial, Helvetica, sans-serif; position: absolute; top: 285px; text-align: center; left: 28%;}#rek { width: 700px; height: 250px; background-color: #fff; border: solid #00aa00; border-radius: 50px; position: relative; top: 20px;}#b1{ background-color: #9999ff; color: #FFFDD0; position: absolute; top: 433px; left: 574px;}#b1:hover{ background-color: #aaaada;}#b2{ background-color: #9999ff; color: #FFFDD0; position:absolute; top: 433px; left: 388px;}#b2:hover{ background-color: #aaaada;}#body{ display: grid;}.plo { position: absolute; left:-17px; pointer-events: auto; }#b3{ background-color: #9999ff; color: #FFFDD0; position:absolute; top: 433px; left: 760px;}#b3:hover{ background-color: #aaaada;}</style><body id=body style="background-color: #999999;"><center><div class="cirkel"></div><div id="rektangel"></div><img src="exempelbild.png" class="bild"><div id=rek></div></center><div id=head><h3>Fake Name</h3> </div> <div id=head1><h3>Kontaktuppgifter</h3><p>0123456789</p><p>fakename@gmail.com</p></div><div id=par><h3>Vem är jag?</h3><p>Hej! mitt namn är Fake Name.<br> Jag är en 00 år gammal kille som går Fakelinjen på Fake School.<br> Just nu lär jag mig att koda HTML och CSS, och som du ser går det rätt så bra.<br> Nedan finns knappar du kan trycka på för att visa mina olika färdigheter</p></div><div class="plo"><a href="file:///C:/Users/fake/Downloads/erfarenheter.htm"><button title="Läs om min erfarenhet" class="button" id="b1">Erfarenhet</button></a><a href="file:///C:/Users/fake/Downloads/utbildning.htm"><button title="Läs mer om min utbildning" class="button" id="b2">Utbildning</button>></a><button title="Läs mitt personliga brev" class="button" id="b3">Personligt Brev</button></div></body></html>