Scale page for different resolutions - html

Question

I have a page which I use margins to place text at different parts of the page as shown below. The A, B, C etc. have been placed there using margin-left in CSS. These however move around depending on the zoom level and resolution of the screen showing them. How can I can place them in the current position so that they won't move around on different screens?
<div>
<div>
<br>
<span class="bigLeft">SECRET.</span>
<span class="bigRight">FORM "F"</span>
</div>
<br>
<br>
<br>
<div>
<span class="biggerCenter">COMBAT REPORT.</span>
</div>
<br>
<br>
<br>
<br>
<br>
<div>
<span class="bigLeft">Sector Serial No.</span>
<span class="bigCenterLettersA">(A)</span>
<span class="bigContentRight"> J.1 </span>
</div>
<br>
<div>
<span class="bigLeft">Serial Number of Order Detailing Flight or Squadron to Patrol</span>
<span class="bigCenterLettersB">(B)</span>
<span class="bigContentRight"> NIL </span>
</div>
<br>
<div>
<span class="bigLeft">Date</span>
<span class="bigCenterLettersC">(C)</span>
<span class="bigContentRight">{{ decodeHTML(report_info.mission_hist_date) }} </span>
</div>
<br>
<div>
<span class="bigLeft">Flight, Squadron</span>
<span class="bigCenterLettersD">(D)</span>
<span class="bigContentRight">{{ flightStatus[report_details.flight] }}, {{ reportUnit.hist_unit_name }} ({{ reportUnit.hist_unit_code }})</span>
</div>
<br>
<div>
<span class="bigLeft">Number of Enemy Aircraft</span>
<span class="bigCenterLettersE">(E)</span>
<span class="bigContentRight"> {{ report_info.enemy_ac_number }} </span>
</div>
<br>
This is the CSS.
<style scoped>
.bigRight {
float: right;
font-size: large;
margin-right: 8%;
}
.bigLeft {
font-size: large;
margin-left: 8%;
}
.bigCenterLettersA {
font-size: large;
margin-left: 48%;
}
.bigCenterLettersB {
font-size: large;
margin-left: 69.1%;
}
.bigCenterLettersC {
font-size: large;
margin-left: 57.3%;
}
.bigCenterLettersD {
font-size: large;
margin-left: 48.5%;
}
.bigCenterLettersE {
font-size: large;
margin-left: 41.8%;
}
.bigCenterLettersF {
font-size: large;
margin-left: 43.8%;
}
.bigCenterPersonnel {
font-size: large;
margin-left: 39.3%;
}
.synopsisText {
text-align: left;
font-size: large;
margin-left: 8%;
margin-right: 8%;
}
.biggerCenter {
font-size: x-large;
text-decoration: underline;
margin-left: 40%;
}
.bigContentRight {
font-size: large;
position: absolute;
margin-left: 2%;
}
.bigContentLeft {
font-size: large;
position: absolute;
margin-left: 1%;
}
.bigContentCenter{
font-size: large;
position: absolute;
margin-left: 19%;
}
</style>

Answer 1

If you don't change the height and width of an element you can set them to a fixed position in the page with
.bigLeft {
position: absolute;
top: 100px;
left: 8vw;
}
That being said this isn't advised because it can become a huge mess.
Also another side note that this would require a fixed width page using the second method as well.
Another possibility would be to make the browser render in a set width no matter screen width.
<meta name="viewport" content="width=1920px">
Though again this isn't the nicest thing to do.
Personally i'd go with setting the width of the "page" to your desired width using min-width and max-width and then using margin-left: 100px etc to position your elements.
Using position: relative could also do the trick here.