追記：※cssのコードを修正しました！表示が崩れた方はもう一度cssをコピペしてください！

結論・まとめ：Xeoryの「テーマエディタ」にdescriptionを追加→cssでflexさせる

↓　テーマに「上書き追加する」コード（１行）

↑　50行目です

↓　cssに「新たに追加する」コード

↑　こんな感じで、Simple Custom CSSで編集してみました。

補足：

767px以下だと、このxeoryテーマの「.wrap」と言うクラスがコンテンツ幅を広げてしまいます。

これにより、左側の余白がよくありませんでした↓（特にスマホだと違和感があります）

「ブログタイトルとサブタイトル」は「コンテンツ幅と同じ」に設定されているので、

その幅を直しましょう！↓

ついでに、h1とpの広すぎるmarginを狭くしちゃいましょう！↓

これを先ほどのCSSに追記してもらえれば大丈夫です。

だいぶ見やすくなりました。

補足２：

この方法だけだと、たぶん、一度でもサイトを訪れた事のある人からは「編集した部分の表示」が崩れて見えます。

「キャッシュを削除」しないと反映されません。

style.cssに「ver=」の指定をすればいけるのですが、テーマを解析するのに時間がかかりそうなのでやめておきます。

もしかしたら、キャッシュを削除しなくてもいけるのかな？

試してみてください。

補足３：

また、「flexなしで、marginで調整する」とデバイス毎に表示が変わってしまってよくありませんでした。

幅を固定したいもの（サブタイトルなど）には、marginは極力使わない方が良さそうです。