TopHeader responsive

I have a problem with my divi site.

test page
https://www.ggb.mdwd.eu/kofferbakverkoop/

With CSS
white-space: nowrap;
the text will by under the image, and oudsite the screen
without
white-space: nowrap;
the text are changed among each other.

How can i make the text responsive so the text will by not outside the screen or under the image, and smaller by smaller screens ?

Fullwidth Header / Body / Text

<div class="topheader3">
<div class="topheader3_text">St.Antonius-, St.Sebastianus- en H.Sacramentsgilde, Beugen</div>
<div class="topheader3_logo"><img src="/wp-content/uploads/2025/05/logo_small.jpg" alt="Logo" /></div>
</div>

CSS style sheet:

/* Container */
.topheader3{
position:relative; /* nodig voor absoluut logo */
width:100%;
min-height:150px;
display:flex;
justify-content:left; /* horizontaal centreren van tekst */
align-items:center; /* verticaal centreren */
padding:010px;
box-sizing:border-box;
}

/* Tekst */
.topheader3_text{
font-family:Arial,sans-serif;
font-size:clamp(16px,3vw,40px);/* dynamisch, schaalt met schermbreedte */
color:#000;
text-align:center;
/* white-space: nowrap; */
max-width:calc(100%-150px); /* reserveer ruimte voor het logo */
line-height:1.1;
display:inline-block;
}

/* Logo */
.topheader3_logo{
position:absolute; /* logo volledig rechts */
right:0; /* helemaal rechts */
top:50%; /* verticaal centreren */
transform:translateY(-50%);
}

.topheader3_logoimg{
height:150px;
display:block;
}