Problem z nagłówkiem text + logo

Hej. Jestem totalnym amatorem w pisaniu kodu i usiłuję poradzić sobie z problemem :D Jeśli to totalna błahostka to proszę mnie nie linczować :D

Mam taki nagłówek:

który w rozdzielczości full hd wyświetla się tak jak powinien, natomiast przy wyświetlaniu strony w mniejszej rozdzielczości, logo wskakuje pod napis zamiast pozostać na swoim miejscu

kod:

<div class="col-6 col-xl-2" data-aos="fade-down">
  <h1 class="mb-0"><a href="index.html" class="text-black h2 mb-0">shootsi.art<img src="logo.svg" style="float:left; width:100px"/></a></h1>
</div>

domyślam się że jest to jakiś problem po stronie responsywności, ale nie mam pojęcia jak sobie z tym poradzić. Z góry dziękuję za każdą pomoc :)

Spróbuj wywalić:
float:left; width:100px
a dodać do tego h1 styl: white-space: nowrap;

przynajmniej tak działa na samym HTML, bez Bootstrapa:

<div >
   <h1 style="white-space: nowrap;">
   <img src="logo.svg"/>
   <a href="index.html">shootsi.art</a></h1>
</div>

https://jsfiddle.net/xfwq27z9/

tym niemniej jeśli już używasz Bootstrapa, to czy tam nie ma gotowych rozwiązań do tego? Inaczej to trochę bez sensu, żeby używać coś, co i tak później nadpisujesz.
no ale jak już, to elegancko zrobić sobie jakieś własne klasy CSS i przypisywać klasy.

Dzięki Ci dobry człowieku! Śmiga jak trzeba :)