Below 650px Window, Search is over Header contrary to intent

In the style.css file, there is this code:

/* Make sure the logo and search form don't collide */
#branding #searchform {
	top: 1.625em !important;
}

However, if the header text is not displayed, this causes the search bar to be over (in the Z axis) the header image. There is no way to override this without an important tag. In order to overcome this, I used the following code in a child theme. The Important tag did work, but I think this is an oversight.

@media (max-width:650px){
 body { padding:0; }
 #branding .only-search #s,
 #branding .only-search #s:focus {
  width: calc( 100% - 40px );
 }
 #branding .only-search.with-image #searchform {
  top: auto !important;
 }
 #branding .only-search.with-image{
  position: relative;
  top: initial;
  bottom: initial;
  clear: both;
 }
 #branding .with-image #searchform {
  max-width: none;
 }

 #branding .only-search.with-image #searchform {
  top: initial;
  bottom: initial;
  left: 0;
  right: 0;
  position: relative;
 }
 #branding .only-search + #access div {
  padding-right: 20px;
 }
 #access ul { margin:none; }
}