Need Help With Space Between Logo Image & Top Of Page

I was wondering if someone can help me with this little space that’s showing between my logo image and the top of the page directly under the search browser. It’s a pinkish color from the animation directly above the text under the black line.

I made a .png image that is all white with the text knocked out/transparent so the css animation I place behind it transitions colors from black to pink then back to black but whenever I place the @keyframes code in the custom css there’s a thin part of the animation sticking out of the top of the logo overlay. Here is the code I used and as far as the animations it works fine except for the little piece sticking out of the top (see image attachment).

@keyframes colorChange {
0% { background-color: #000000; }
4.5% { background-color: #160109; }
9% { background-color: #2d0212; }
13.5% { background-color: #44031b; }
18% { background-color: #5a0424; }
22.5% { background-color: #71052e; }
27% { background-color: #880637; }
31.5% { background-color: #b50849; }
36% { background-color: #cc0952; }
40.5% { background-color: #e30b5c; }
45% { background-color: #e5236c; }
49.5% { background-color: #e30b5c; }
54% { background-color: #cc0952; }
58.5% { background-color: #b50849; }
63% { background-color: #880637; }
67.5% { background-color: #71052e; }
72% { background-color: #5a0424; }
76.5% { background-color: #44031b; }
81% { background-color: #2d0212; }
85.5% { background-color: #160109; }
90% { background-color: #000000; }
100% { background-color: #000000; }
}

div.site-branding {
animation: colorChange 30s infinite;
}

Right now I changed the logo back to the webP black & white but if needed I can change it to the .png image.

• This topic was modified 1 year, 5 months ago by mfghost.

The page I need help with: [log in to see the link]