元々Cocoonデフォルトの設定状態だとヘッダーロゴもキャッチフレーズも中央揃えで表示される仕様です。
ただ、画像は真ん中に表示されているのですが、冒頭書かれている通り画像自体が左寄りに作られているため、ちょっと違和感のある表示になっているようです（画像が左寄りに作られているのは、スマホで翻訳とかぶらないため？）。

ただ、それでもあえて左揃えにする場合は、お書きになっているコードのtext-align: left;で行なうとこんな感じになりますが、このような表示になる方法で良いのでしょうか。

それともこんな感じでキャッチフレーズを画像に揃える感じでしょうか。
とはいえ、この状態でも画面の中心からロゴはずれた状態になるので、まだ多少違和感はあるかもしれません。
しっかりとやるなら、画像は普通に余白をなくして作って、CSSで思い通りに表示にした方が良いような気はします。

わいひらさんの回答を補足し、対策を述べます。

●原因

[Cocoon設定]→[ヘッダー]→ヘッダーロゴの画像自体の文字が左寄りで作成されています。
ヘッダーロゴ画像、キャッチフレーズとも横中央で配置されます。
ヘッダーロゴ画像の画像が中央配置されても、画像の文字が左寄せのため、キャッチフレーズと揃いません。

●対策

• ヘッダー画像自体の文字を中央寄せで作成しなおします（図のように右の余白を削除する）。
• このままでは、モバイル表示（画面幅が834px以下）の場合、右上の「Translate」がヘッダーロゴ画像に重なってしまいます。
  そこで、画面幅が834px以下の場合、ヘッダーロゴ画像上に「Translate」表示分の余白を設け、ヘッダーロゴと重ならないようにします。

記述されている、CSSを削除し、以下とする。

@media (width<=843px) {
  .logo-image {
    padding-top:40px;
  }
}

丁寧な返信いただき、ありがとうございます。

大門さんにいただいた内容に基づき、余白のない新しいロゴ画像（600*150px）を作成し、差し替えを行いました。

ヘッダーロゴサイズ設定は600*150pxです。

• PCでの表示：ロゴとサブタイトルが中央に表示されました（横幅は揃わないが許容範囲内）。

• スマホでの表示： 引き続き、翻訳ボタンとロゴ画像が重なって表示されています。

理想としては、添付画像のようなレイアウト、具体的にはサルワカさんのサイトのように、PCでもスマホでもロゴとサブタイトルがすっきりと見えるデザインを希望しております。

度々の質問にて申し訳ありませんが、再度お知恵お借りいたしたく、どうぞよろしくお願いします。

追記にてすみません。

一番の希望は、先程の添付画像のような ロゴ画像、サブタイトル、グローバルメニューの高さのバランス です。

わいひらさんにいただいた3つ目の返信の画像が、私のイメージに非常に近いです。

サイト開設以来、ロゴ画像の縦幅が理想よりも大きく表示されてしまうことに悩んでおります。

また、サブタイトルの文字数が長いため、ロゴ画像と横幅を合わせると、画像が想定よりも大きく表示されてしまうのではないかと懸念しております。

@sayo さん

投稿者:: @sayo

↑

スマホでの表示： 引き続き、翻訳ボタンとロゴ画像が重なって表示されています。

それは追加CSSに入力ミスし、コードが正しく入力されていないからです。

返信くださり、ありがとうございます。

追加CSSの書き込みを更新（添付ファイルの状態）しましたが、翻訳ボタンとロゴの被りが解消されません。

なんでだろう、すみません（TT）

追加CSSは反映されていません。ご自身で、Chromeデベロッパーや、ページソースを表示し確認願います。
結構CSSを追加しているので、追加CSSに追加するより、子テーマCSSに記述するのが望ましいです。

●ヘッダーの大きさについて

ヘッダーロゴの大きさは画面幅に応じて変化します。
現在、[Cocoon設定]→[ヘッダー]→ヘッダーロゴサイズ幅600pxになっているのでは？
当然、画面幅が600px以下でないと画像は縮小しません。

●希望のレイアウトについて

そもそも「Translate」はCocoonの要素ではなく、プラグインが配置しています。
Cocoonのヘッダーロゴなどのとは独立しており、フッターに存在する要素を右上に移動し、重ねています。

それを期待のレイアウトに変更するには、工夫が必要です。

また、キャッチフレーズの長さ（幅）が狭い為、ヘッダーロゴ、「Translate」をキャッチフレーズの左端、右端に綺麗に配置することは困難です。

●対応

そこで以下で対応します。

• ヘッダーコンテナの幅を仮に835pxとする。
• ヘッダーコンテナ幅に合わせ、キャッチフレーズを両端揃えする。
• ヘッダーロゴを中央揃えから左端揃えに変更する。（ヘッダーロゴ画像を300px）
• Translateの位置をヘッダーコンテナの右端揃えとする（画面横中央から、ヘッダーコンテナの右端に配置）。
• 画面幅が834px以下のとき、画面右端揃えに変更。

/* ヘッダーコンテナ幅 */
#header-in {
  max-width: 835px;
}

/* ヘッダーロゴ画像幅 */
.logo-header img {
  width: 300px;
}


/* ヘッダーロゴを左端に配置 */
.logo {
  text-align: left;
}

/* キャッチフレーズを両端均等配置 */
.tagline {
  text-align-last: justify;
}

/* Translateをヘッダーコンテンナの右端に配置 */
#glt-translate-trigger {
  right: calc(50% - 415px);
}

@media (width <= 834px) {
  #glt-translate-trigger {
    right: 0;
  } 
}

以下のCSSですけれど。

↑

@media (width<=843px) {
  .logo-image {
    padding-top:40px;
  }
}

私の環境でも、「追加CSS」に入力すると、以下のように不等号以降が切れます。
入力ミスではなさそうです。
（2回目のCSSも追加CSSに入力すると、同様に不等号以降が切れます）

投稿者:: @mk2_mk2

↑

入力ミスではなさそうです。

マジっすね苦笑
追加CSSだと途切れますね。今知りました。
mediaクエリの比較演算子はブラウザで許可されているのに草

以下の修正してください。

@media (max-width: 834px) {
  .logo-image {
    padding-top:40px;
  }
}

●補足

投稿下のカスタムCSSは、記述通り展開されます。
普段、子テーマCSSにしか記述しないので、先の追加CSSは全く気づかず。しかも謎動作。

ちゃんと調べていないですけれど。

以下で、切れてしまうのかもしれません。

https://github.com/WordPress/WordPress/blob/23c1de7d05bf4d2ff5e826bac24811a478f87f9c/wp-includes/theme.php#L1956-L1969

試しにfunctions.phpで、wp_get_custom_css()で追加CSSを取得して。
それを、strip_tagsすると、切れてしまいました。
HTMLタグと認識されてしまうのでしょうか。

投稿者:: @mk2_mk2

↑

それを、strip_tagsすると、切れてしまいました。

正解ですね。

strip_tags() は < と > をタグの開始・終了と見なして削除するため、(width<=843px) の中の < をタグと誤解し、そこから先のCSSを切り捨てるか、壊す動作をしてしまう。

ありがとうございます。ご提案いただいた、不等号を使わないCSSと追加のCSSを実装しました。

おかげさまで、PCでもスマホでも要素が重なることなく表示されるようになり、大変満足しています。

一点、PC表示でサブタイトルの文字間隔が広くなってしまうのは、キャッチフレーズを「両端均等配置」にしている以上、避けられない仕様だと理解しています。

私のサイトは内容がマニアックなので、翻訳機能は必須だと考えています。ヘッダー画像、サブタイトル、翻訳ボタンの三要素を搭載する以上、縦幅の理想的な表示を追求するのは難しいのかもしれませんが、これについては今後、余裕ができたときにヘッダー画像の変更などで調整を検討したいと思います。

今回も大変お世話になりました。親切なご助言の数々、本当にありがとうございました。

投稿者:: @sayo

↑

ありがとうございます。ご提案いただいた、不等号を使わないCSSと追加のCSSを実装しました。

まさか、[外観]→[カスタマイズ]→[追加CSS]にこのような問題が隠れているとは、思いもしませんでした。
また、勉強になりました。

希望のレイアウトですが、CSSの内容を理解した上で、試してみてください。