Mobile Menu Height

Trying to over ride a setting in layout.css with a Child Theme css adjustment, but it’s not taking for some reason. Thoughts?

There’s a black bar that appears below the header on tablet and mobile views. In chrome dev tools, I can change the height from 80px to 72px, which fixes the issue locally, but when I place the following CSS in my Child Theme (where all other adjustments have worked fine), it doesn’t take.

@media only screen and (max-width: 767px)
.responsive #top .logo {
    height: 72px !important;
}

@media only screen and (max-width: 767px)
.responsive #header_main .container {
    height: 72px !important;
}