Ghost 3.X Theme Override

Fighting with the css for override the main menu header bar.  I want to display my custom google site search bar and this was working previously with my Ghost 2.X theme, but then 3.X changed the styling and overrides.

It appears Ghost compiles the css into a built version, as in I checked in the source from the mapping in Web Inspector and the following element is defined in file screen.css:269 which corresponds to line 269 in the source which is something usually like /var/www/ghost/versions/3.0.3/content/themes/casper/assets/css/screen.css and if I then open this line up and edit the css like so nano +269 /var/www/ghost/versions/3.0.3/content/themes/casper/assets/css/screen.css it makes no difference no matter how many times I restart ghost ( ghost restart )

The .site-nav-main div class here

.site-nav-main {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background: #090a0b;

so I don't want to see any div marked up with this css so I want this css override

.site-nav-main {
    visibility: hidden !important;
}

Using the !important tag to force my behavior in over others and place this in my Code Injection -> Site Header section to have it override on all pages like so

<div class="gcse-search"></div>
<style type="text/css">
  .site-nav-main {
      visibility: hidden !important;
  }
</style>

First line is the custom Google domain search embedded box