I'm facing a challenge where the elements on my website do not stay in place within their designated sections when I zoom out. Despite my efforts to inspect and adjust the properties of these elements, I can't seem to pinpoint the root cause of this issue.
Here are some important details:
In my CSS, I've set fixed positioning and specific sizes for various elements such as headers, sections, images, and divs. I've tried modifying units (e.g., percentages, viewport units) and experimented with different positioning properties (e.g., relative, absolute). I've made sure that parent containers are properly configured. However, the problem persists, and I'm baffled as to what could be causing this unexpected behavior.
Additional Information:
I've used browser developer tools to analyze the elements but haven't been able to identify the exact CSS properties responsible for the displacement. Could someone please review my CSS and HTML code snippets to help me determine the source of this issue? Any insights or suggestions would be highly appreciated.
Thank you very much in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Safety Systems</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Your Account Issues.</h1>
</header>
<section>
<div class="aboutitc">
<div class="aboutith">
<h1>Actions taken to your account:</h1>
</div>
<div class="actions" id="actions1">
</div>
<div class="actions" id="actions2">
</div>
<div class="actions" id="actions3">
</div>
<div class="actions" id="actions4">
</div>
<div class="actions" id="actions5">
</div>
</div>
</section>
<div class="input-container">
<input type="text" id="inputField" placeholder="To test this please input a warning" style="width: 300px; height: 100px;">
<button id="addButton">Add Warning</button>
</div>
<section>
<div class="line">
<div class="linepoints hidden" id="linepoints1">
<img src="tick.png" alt="tick" style="height: 70px;">
</div>
<div class="linepoints1 hidden" id="linepoints2">
<img src="6898883.png" alt="Warning" style="height: 60px;">
</div>
<div class="linepoints2 hidden" id="linepoints3">
<img src="203c.png" alt="warrrnnn" style="height: 66px; top: 2px; position: relative;">
</div>
<div class="linepoints3 hidden" id="linepoints4">
<img src="24-241608_nuclear-symbol-radiation-symbol-black-and-white.png" alt="nuke" style="height: 52px; top: 10px; position: relative;">
</div>
<div class="linepoints4 hidden" id="linepoints5">
<img src="x-mark-transparent-24.png" alt="x" style="height: 60px; top: 5px; position: relative;">
</div>
<div class="line1 hidden" id="line1"></div>
<div class="line2 hidden" id="line2"></div>
<div class="line3 hidden" id="line3"></div>
<div class="line4 hidden" id="line4"></div>
<div class="line5 hidden" id="line5"></div>
</div>
</section>
<div class="pfp">
<div class="pfpwar hidden" id="linepointz">
</div>
</body>
<script src="main.js"></script>
</html>
CSS:
/* Your CSS styles here */ I have tried adjusting widths using different units of measurement, but without success.