How to style the header on the index page with custom CSS in 7.0

I'm trying to add bottom padding or bottom margin to the header of my  "WORK" index page and Gallery Pages because the header is hiding the top of the images, especially when the announcement bar is on. Is it possible to style the Announcement Bar as well.

I've included attachments of the header margins with and without the announcement bar.

I would like to match the padding of my "STUDIO" page.

Website: https://ivesgrafik.com/

Thank you.

This is current Custom CSS I'm using on my site to control the header padding, unfortunately, it has a universal effect on all the pages, and the padding is much tighter on the Index Page. I'd like uniformity between the Index Page and my "STUDIO" page.

section#container {

padding: 0px !important;

margin-top: 100px !important;

}

Try this CSS code

header#topBar {
    position: relative !important;
}
section#container {
    margin-top: 10px !important;
}

this code for whole site

Thanks for your assistance with this; however, this still isn't working. I've replaced your code above with:

section#container {
    padding: 0px !important;
    margin-top: 100px !important;
}

I am trying to match the top header margin on the "WORK" Index Page to the same margin as the "STUDIO" Page. I hope that makes sense.

Thank you,

Brad

I'm attaching files that hopefully identifies what I'm trying to achieve with the margins. "SCREENSHOT1.JPG" is the Index Page. "SCREENSHOT2.JPG" is the Page populated with image and text blocks, etc.

It cropped because header is white, it will overlap a part of page content, you can use this CSS to prevent it

header#topBar {
    background-color: transparent !important;
}

I thought about making the header clear or transparent; however, the images will appear to close to the text and logo. Thank you for trying.