Making an input icon (search icon) responsive : <p>Typical for a search bar, I've added a magnifying glass icon on the left side for UI purposes. On desktop it looks fine and stays at the position nicely. However, when switching to mobile the icon is repositioning itself according to the device width.</p>

<p>I thought by increasing the <code>left</code> parameter for <code>@media (max-width: 768px)</code> it will be fixed but it seems to behave differently.</p>

<p>A gif of the issue with the code on the right side is added. What am I doing wrong?</p>

<p><a href="https://i.stack.imgur.com/15qtK.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15qtK.gif" alt="Search icon behaving differently for mobile sizes"></a></p>
