I have a website with a responsive design, where the body has been set to max-width: 500px, and there is a div named 'arrow' with a margin-left of 45%. However, when the screen size exceeds 500px, the body remains fixed but the arrow div starts moving in the wrong direction.
Is there a way to limit the margin-left value so that the arrow div does not move past a certain point even if the screen size increases further? Below is the CSS code:
.arrow {
background-color:#ECEFF5;
width: 30px;
margin-top: -12px;
position: absolute;
margin-left: 45%;
}
html, body {
margin: 0 auto;
}
body {
background-color: #ECEFF5;
font-weight: lighter;
max-width: 500px;
}
Here is the HTML code:
<body>
<div class="userdata">
<h2 style="font-weight:bold;"> First Name</h2>
<input class="input" type="text" name="firstname">
</div>
<div class="arrow">
<img src="arrow.png" style="position:absolute; width: 30px;">
</div>
<div class="instructions" id="test">
<h5>Step 1/7</h5>
<hr width="100%">
<h6 >Write your name here</h6>
<a href="xyz.html" class="button-nav" > Back </a>
</div>