Difficulty Selecting Class in Chrome Extension

I am writing a chrome extension that renders a tool bar at the top of the DOM. When opened, I've written javascript that pushes everything down by 30px to allow the rest of the content to be viewed without interruption by the toolbar.

The issue I'm having is with document.querySelector. I'm using a simple Javascript Chrome extension (User Javascript and CSS) to rapidly prototype and make sure that the code is at least remotely working before I package everything and load it into Chrome. using a query selector to select the element is working fine through the browser extension, but not

Upon doing some reading - I'm seeing stuff about content scripts that I don't really fully understand. Is there a good resource to learn about these and when they should be used? My research has not been very helpful, but I feel like I'm not necessarily looking in the right places. I understand that some things require the Chrome API to access the web page (to prevent malicious scripting?)

I've tried a few things. The first thing I tried is:

document.getElementsByClassName("mini-header").style.marginTop = "30px";

which seems to work in this javascript injection extension but not in actual production.

The second thing is:

document.querySelector(".mini-header").style.marginTop = "30px";

Again, this works in the javascript injection extension, but not in actual production.

Here is the current script:

  for (var i = 0; i < checkURL.length; i++) {
    if(window.location.href.indexOf(checkURL[i]) > -1){
      navBar =  document.createElement('div');
      navBar.setAttribute("id", "pwmdnavbar")
      navBar.innerHTML = '<div id="pwmdnavbartitle"><p>The Museum Guide</p></div><div id="hellify"><button id="hellifybutton">Show Me The Dirt!</button></div><div id="closepwmdnavbar"><button id="closepwmdnavbarbutton">X</button></div>';
      x.insertBefore(navBar, x.firstChild);
      }
    if (window.location.href == "whitney.org"){
      document.getElementById("w").style.marginTop = "30px";
      document.querySelector(".mini-header").style.marginTop = "30px";
    } 
  }
}

The element I am trying to select and modify is here:

<div class="mini-header__wrapper">
  <aside class="mini-header content-wrapper">
    <div class="mini-header__left">
      <a class="mini-header__title" href="/" tabindex="-1">Whitney Museum of American Art</a>
    </div>

    <div class="mini-header__right">
      <div class="nav-actions">
          <div class="nav-actions__hours body-medium">
            <a href="/visit#hours">Open today: 10:30 am–6 pm</a>
          </div>

          <a href="/ticketing-services" class="nav-actions__link nav-actions__link--btn nav__link nav__link--primary" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Ticketing (Header)' });">
            Buy Tickets
          </a>

        <a href="/membership-services" class="nav-actions__link nav-actions__link--btn nav__link nav__link--secondary" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Membership (Header)' });">
          Become a Member
        </a>
      </div>

      <button class="mini-header__menu" type="button" aria-label="Scroll to menu" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Menu (Header)' });">
        Menu
      </button>

      <button class="mini-header__mobile-menu" type="button" aria-label="Menu" aria-haspopup="true" onclick="if (useAnalytics) dataLayer.push({'event': 'gaEvent', 'category': 'Buttons', 'action': 'click', 'label': 'Menu (Header)' });" aria-expanded="false">
        Menu
      </button>
    </div>
  </aside>
</div>

I am not getting any error messages. It just isn't modifying the css in the way that I am anticipating. Any thoughts?