HTML CSS pタグ要素の位置調整を行いたい

Question

画像の中の「会社概要 お問い合わせ　よくあるご質問」この要素を左に寄せたいと考えているのですが、padding-rightで調整しようとすると、文字がごちゃごちゃになってしまいます。

1枚目の画像の状態を維持したまま左にずらすにはどうすればよいでしょうか？
marginでも同じ結果になります。

<div class="container2">
        <p>営業時間:10:00~19:00<br />
          定休日:日曜日と祝日<br />
          住所:〒000-0000○○県○○市<br />
          </p>
         <p class="foo">
          Home<br />
          About<br />
          Product<br />
          Online Store<br />
          NEWS<br />
         
       </p>
       <p class="foo2">
         
         会社概要<br />
         お問い合わせ<br />
         よくあるご質問
 
       </p>

      </div>

.container2{
  width: 100%;
  display: flex;
  gap:100px
}



.container2 p{
  padding-left: 400px;
  padding-top: 30px;
}


p.foo{
  text-align: center;
  padding-left: 80px;
}

p.foo2{
  text-align: center;
  padding-right: 500px;
}

下がpaddingを適応させた場合

Answer 1

うーん、あまり筋は良くありませんが、原因は.container2 pでpadding-left: 400px;が設定されていて左がうんと空いてしまっていることですので、これを（p.fooでもやっているように）オーバーライドしたら良いのではないでしょうか。つまりp.foo2にもpadding-left: **px;を入れて調整するということです。

Comments

[HdNu]

ご回答いただきありがとうございます。
うまく調節することができました。