title: How to set max margin-left?
body: <p>I have a webpage with responsive design, whose body I have set to max-width: 500px; and a div 'arrow' whose margin-left:45%. When screen size goes beyond 500px, the body stays fine and fixed, but since the div arrow's margin-left is 45% of screen size, it starts moving in the wrong direction. </p>
  
  <p>Is there a way to set a max on margin-left so that arrow div doesn't move beyond a point even if screen-size keeps increasing?
  CSS Code is below:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>And HTML is:   </p>
  
  <pre><code>&lt;body&gt;  
      &lt;div class="userdata"&gt;
          &lt;h2 style="font-weight:bold;"&gt; First Name&lt;/h2&gt;
          &lt;input class="input" type="text" name="firstname"&gt;
  
      &lt;/div&gt;
      &lt;div class="arrow"&gt;
          &lt;img src="arrow.png" style="position:absolute; width:   30px;"&gt;
      &lt;/div&gt;
      &lt;div class="instructions" id="test"&gt;
          &lt;h5&gt;Step 1/7&lt;/h5&gt;
          &lt;hr width="100%"&gt;
          &lt;h6 &gt;Write your name here&lt;/h6&gt;
          &lt;a href="xyz.html" class="button-nav" &gt; Back &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>