Announcement bar struggles

[RednahPowderDye]

Hi,

I've made my header transparant with the code below. However, now my announcement bar forever does not look how I want it to. I need much less space above and below the text. Also it shoul dnot overlap with my header. And I want it to be fully shown on mobile. Can someone help? My store link: https://rednah.com/
<style>
.shopify-section-group-header-group.announcement-bar-section{
height: 40px;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 25px;
}
</style>

{% endif %}

[vm-web]

@RednahPowderDye 

try this code 

<style>
.shopify-section-group-header-group.announcement-bar-section{
height: auto;
}
.header-wrapper{
position: absolute;
width: 100%;
background: transparent;
}
.header-wrapper .header{
margin-top: 5.5rem;
}
</style>

[RednahPowderDye]

Thank you very much for this! Just one thing. How can I remove the space above and below the text as much as possible?

[vm-web]

@RednahPowderDye 

Please add the following css code to your assets/base.css bottom of the file.

.announcement-bar__message {
    padding: 0.5rem 0 !important;
    min-height: 0.8rem !important;
}

Thanks!

[RednahPowderDye]

I tried. But it didn't change (see attached where I pasted the code). Perhaps something else I can try?

[vm-web]

@RednahPowderDye 

closing bracket missing please check follwing code  and screenshot.

100% {
    transform: translateX(100%) scaleX(0);
  }
}

.announcement-bar__message {
    padding: 0.5rem 0 !important;
    min-height: 0.8rem !important;
}

Thanks!

[RednahPowderDye]

Hi,

I tried. This also does not work. Any other suggestions maybe? Also all of a sudden my colors in mij editing screen look different than on the actual website. So my menu now is brown but should be white.