Website banner above the header

I would like to put a banner on my website above the header, like in the example below, but somehow I’m failing to make that happen. please advise

Like this ? Screenshot by Lightshot

go to banners>+ add banner> Save
then go to layouts>default (if you want it on all pages)
then add a grid to the top panel as here Screenshot by Lightshot
then add a block to the grid, and in the block choose “banners” and select the banner you created in step one Screenshot by Lightshot

As alternative you can just create HTML block in the Header section. Basic CSS knowledge is reqiured

ChatGPT does the html css pretty well

Description
NOTE: i.e. this is what I asked chatGPT, change it up for a different result

can I have the html for a thin banner (sufficent to hold one line of text at 10pt) with three sets of white text, on a poo-brown background and with a 1pt thin wite border on background. The first test saids “Sundresses and Cowgirl boots? Giddy YUP!” in italics followed by cowgirl emoji, followed by 1cm of blank space, followed by “Nashville to Asheville” in bod followed by 1cm of blank space, followed by “Shop new arrivals” underlined, in italics with a link to "https://www.mystore.com/new-arrivals. The sets of text should be centered in screen. The banner should have a text arrow at each end of banner i.e. < >. The code is going on an existing page so should be within a new

Code
NOTE: place it in the html on the default tab of layout, and tick copy to other locations

<div style="
    background-color: #964B00;
    border: 1px solid white;
    color: white;
    font-size: 10pt;
    text-align: center;
    padding: 10px;
">
    <span style="margin-right: 1cm;">
        <span style="font-style: italic;">Sundresses and Cowgirl boots? Giddy YUP! &#128129;</span>
    </span>
    <span style="font-weight: bold; margin-right: 1cm;">Nashville to Asheville</span>
    <span style="font-style: italic; text-decoration: underline;">
        <a href="https://www.mystore.com/new-arrivals" style="color: white;">Shop new arrivals</a>
    </span>
    <span style="float: left; margin-left: 10px;">&lt;</span>
    <span style="float: right; margin-right: 10px;">&gt;</span>
</div>

Output
NOTE: link will only work until I blow the site away, which is getting closer as I have busted it up pretty well testing pre-deployment stuff

Shopping Cart Software & Ecommerce Software Solutions by CS-Cart (thefarmerslot.com.au)