Unschöne Zeilenumbrüche in Mobiler Ansicht

Hallo ihr Lieben,

ich habe vor kurzem mit Wordpress angefangen zu arbeiten und erstelle gerade eine HP für einen Freund. -> http://www.yourbestbuddy.eu
D.h. aktuell eine Landing-page. Dabei nutze ich das Theme Spacious.
Leider funktioniert die Mobile-Ansicht nicht so wie ich das gerne hätte.
Also es gibt gewisse Textfelder, die ich per HTML-Widget eingefügt habe. Diese enthalten Stichpunkte also <li> tags, welche leider in der Mobile view nicht so aussehen wie in der normalen Ansicht.
(Siehe Bilder im Anhang)
Ich habe bereits viel gegoogelt und mich erkundigt was man so machen kann, um das responsive design zu optimieren. Da bin ich auch das Plugin Jetpack gestoßen. Nach der Aktivierung sahen die Umbrüche in der Mobile-Ansicht von Wordpress, also noch im Customizer, so aus wie ich sie haben wollte (umbruch-mobile-wp.jpg)
Aber mein Kollege hat mir ein Screenshot von seinem Smartphone geschickt (umbruch-mobile.png). Und da hat sich leider immer noch nichts getan.
D.h. die Mobile-Ansicht in WP entspricht offenbar nicht unbedingt der realen. (?) Oder kann das von smartphone zu smartphone unterschiedlich sein? Abhängig vom Browser?
(Ich habe zur zeit kein Smartphone, soll also nicht heißen, dass es auf meinem gut aussieht und nur auf seinem schlecht. Ich selbst konnte das nicht testen.)

Wir sind auch schon dabei zu überlegen, geld für ein besseres Theme auszugeben.
Vielleicht eines hiervon:
https://www.isitwp.com/best-responsive-wordpress-themes/
Deswegen auch ein Grund für mein Post. Macht das Sinn, oder lässt sich das einfach lösen?
Oder wird man bei einem kostenlosen Theme noch öfter auf solche Probleme stoßen. Die man nicht (oder viel weniger) hat, wenn man Geld für ein gutes responsive Theme ausgibt?

LG Simon

Hier noch der HTML Code eines der Text-Felder:

<div class="wrap2">
<div class="content" style="margin-left: 10px; margin-top:10px; margin-bottom:20px; margin-right:10px">
<h1 style="font-weight:bold">
<font color="#e46c0a">
Was?
</font>   
</h1>
<div style="margin-left:25px; line-height:25px">
<font style="font-size:20px" color="#e46c0a">
<li>Digitalisierter und dynamisierter Buchhaltungsservice</li>
<li>Inklusive Lohn und Gehaltsabrechnung</li>
<li>Kaufmännische Betreuung</li>
</font>
</div>
</div>
</div>

Und zusätzlicher CSS Code den ich verwende:

.wrap {
   /*\*/ display: table; /**/
   width: 100%;
   background-color: #fdf2ea;
   border-spacing: 100;
   margin-bottom: 10px;
}


.wrap2 {
   display: table;
   width: 100%;
   background-color: #f2f2f2;
}


.image, .content {
   display: table-cell;
   vertical-align: middle;
}


.content {
   width: 100%;
}


.image, .content {
   display: inline-block;
   width: auto;
}
.image2, .content {
   display: inline-block;
   width: auto;
}


.image a, .image img {
   border-width: 0;
   vertical-align: bottom;
}

Hi danke dir für deine Antwort.
Merkwürdig. Bei der Installation lief eigentlich alles glatt. Ich halte mir das mal im Hinterkopf, und wenn alle Stricke reißen, installier ich es vielleicht mal neu.
Ich habe gerade mal den <ul> Tag eingefügt, der ja meinen Zweck erfüllen sollte. <ol> steht ja für ordered list, was ich gar nicht haben will.
Allerdings sieht es dann aus wie in angehangener Grafik. Die Aufzählungspunkte fehlen. (Die Nummerierung bei <ol> wird allerdings angezeigt.)
Ich erinnere mich auch gerade daran, dass ich zu Beginn durchaus die <ul> Tags verwendete und den gleichen Fehler bekam.
Daher hatte ich diese mit Absicht entfernt. Da erst dann die Punkte richtig angezeigt wurden.