I need to hide a H2 of a widget

I have a blog where I use the affiliate links of GetYourGuide.
In particular, I use it in this page:
https://www.visitare.net/best-tours-in-bologna/

I insert the affiliate widget through the HTML widget of Elementor, and it comes with a very annoying H2 header:

I tried to delete it with CSS:

.title-banner {display:none;} 
.title-banner[data-v-48b40ecd] {display:none;} 

and I also used !important, but nothing worked

This problem also repeats each time I use this affiliate links, I don't understand why GetYourGuide has to insert a headline that should be personal based on the blog.

Before you start reading here, please read my comments under the OP's question.

After some thought and as a last resort, it could be done with some sort of workaround. It's just an idea and maybe it will get to the point, especially when it comes to mobile views, where it doesn't make sense anymore. You'll just have to experiment around there.

So what's it all about? The idea is to put the <iframe> in a container, set <iframe> to position: absolute; and pull it up a bit with a negative value for margin-top. Finally, we also need the clip-path property to mask it. NOTE: This is what you need to do for each <iframe>, e.g. Top sights in Bologna, Best Food Tours, etc.

For a better understanding here is a very brief example. The gray area is virtually the container. Of course, it can have the same height as the <iframe> and is only larger for demonstration purposes. The red area, on the other hand, is supposed to represent the <iframe>. Finally, the Lorem Ipsum placeholder text simply represents any arbitrary content. In your case, of course, this would be the images.

I think putting the <iframe> into a container and then applying the CSS rules from below should be possible with Elementor.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.iframe-container {
    width: 480px;
    height: 300px;
    background: #ccc;
}

.iframe-dummy {
    padding: 10px;
    width: 460px;
    background: red;
}

.iframe-dummy h2 {
    margin: 0;
    text-align: center;
    color: white;
}

.iframe-dummy p {
    text-align: justify;
    color: white;
}

/* THE WORKAROUND CLASS (see AFTER example in HTML) */

.workaround {
    position: absolute;
    margin-top: -45px;
    clip-path: margin-box;
}

<!-- language: lang-html -->

<h2>Before:</h2>
<div class="iframe-container">
    <div class="iframe-dummy">
        <h2>Annoying Title</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>
<h2>After:</h2>
<div class="iframe-container">
    <div class="iframe-dummy workaround">
        <h2>Annoying Title</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

<!-- end snippet -->

EDIT (in reference to a comment by the OP):

> Can you show me a practical example directly for my website?

I took another look at your website and found that a suitable container already exists. Besides that, you can also omit setting position: absolute;. I have to mention that by not having custom class names or IDs, I had to fall back on what was there. I'll come back to that later.

First, here is the required CSS:

/* Column containing Top sights in Bologna, etc. */

body.page-id-7215 .elementor-element-a8f0323 .elementor-widget-container > div:first-child {
	margin-top: -60px;
	clip-path: margin-box;
}

/* Column containing Useful Links, etc. */

body.page-id-7215 .elementor-element-0ca608c .elementor-widget-container > div:first-child {
	margin-top: -115px;
	clip-path: margin-box;
}

Targeting explanation:

body.page-id-7215 - is needed to not take effect on other subpages as well (unique page id)

.elementor-element-a8f0323 - class name of left column containing Top sights in Bologna, etc.

.elementor-element-0ca608c - class name of right column containing Useful Links, etc.

.elementor-widget-container - the widget container

div:first-child - the actual container of the <iframe> (the one we need)

Properties explanation:
I have already explained the properties before (see above).

Screenshot (CSS applied via DevTools):
https://i.imgur.com/tEusP11.jpg

Closing words:
To come back to what I already mentioned. Using .page-id-7215, .elementor-element-a8f0323 and .elementor-element-0ca608c is suboptimal, since these names can change, e.g. with a new installation, etc.

You can't do that in the browser. When an iFrame is loaded from a domain different that that of the webpage, JavaScript access to that iFrame is blocked. CSS too. You might be able to fiddle with the Content Security Policies meta tags on in your HTML but I doubt it.

You could however use a server like Nodejs and do it. Use Node's http module and load/fetch all these widgets then use jsdom to get the parts you want and assemble it all into your final webpage.

You could run that node script daily or hourly to save your customized HTML (page) on disk and serve it static.