Adjusting the margin/position of a nav's search bar crashes my browser

Question

I'm working on a SharePoint site and every site that's within the collection displays the same navigation menu. You can make edits to the nav menu that's displayed on a particular page, but edits made to the nav menu's code are inherited by all of the sites in a collection.

I'm having an issue with how my site's nav menu's search bar is displayed. I formatted the width of the search bar properly, however, when I adjust the margin or position of the bar my browsers (IE and Chrome) crash. Making the adjustments in dev tools beforehand shows the adjusted margins/position as expected (no crashes).

So my question is: Does this sound like a SP problem or is the problem buried somewhere deep within my code's CSS (or elsewhere)? Editing the SP site version of the nav menu's a bit dodgy, but it doesn't affect any of the other versions of the other sites (unless I edit the code of the nav menu itself---in their respective code files).

Code sample:

#navmenu > li > a > img {
    margin-top: 0.75rem !important;
}
header div.searchBox > input { /* this is fine */
    width: 18rem;
}
header div.searchBox { /* this crashes my browsers */
    margin-top: 2rem;
}

Answer 1

Try to use the CSS style below to check if it works.

<style>
#navmenu > li > a > img {
    margin-top: 12px !important;
}
div.searchBox > input {
    width: 288px;
}
div.searchBox {
    margin-top: 32px;
}
</style>