中央寄せにしているボックスの中のテキストのみ左寄せにしたい。

Question

前提

HTML、CSSでWEBの模写コーディング中です。
お知らせのページでボックスの中にあるテキストをのみを左寄せにしたいです。
ボックス自体は中央寄せになっています。

実現したいこと

発生している問題・エラーメッセージ

            <h5>お知らせ</h5>
            <ul class="news-container">
                <li class="news-container-list">
                    <a href="#">
                        <time datetime="2020.12.22">2020.12.22</time>
                        <span>休診情報</span>
                        <p>2021年1月の休診日は5日、17日、27日となります。</p>
                    </a>
                </li><!-- ./news-container-list -->

                <li class="news-container-list">
                    <a href="#">
                        <time datetime="2020.12.11">2020.12.11</time>
                        <span>イベント</span>
                        <p>当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</p>
                    </a>
                </li><!-- ./news-container-list -->

                <li class="news-container-list">
                    <a href="#">
                        <time datetime="2020.12.01">2020.12.01</time>
                        <span>採用</span>
                        <p>当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</p>
                    </a>
                </li><!-- ./news-container-list -->

                <li class="news-container-list">
                    <a href="#">
                        <time datetime="2020.11.12">2020.11.12</time>
                        <span>イベント</span>
                        <p>ホームページをリニューアルしました。</p>
                    </a>
                </li><!-- ./news-container-list -->

                <div class="news-button">
                    <a class="news-container-list-button" href="#">すべて見る ▶︎</a>
                </div>
            </ul><!-- ./news-container -->
        </div><!-- ./news -->

該当のソースコード

.news {
padding-bottom: 112px;
background-color: #F5FCF8;
}

.news-container {
max-width: 1180px;
height: auto;
margin: 0 auto;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 30px;
opacity: 1;
list-style: none outside;
padding-top: 29px;
padding-bottom: 46px;
}

h5 {
font-size: 24px;
background: linear-gradient(transparent 70%, #99E5A5 70%);
max-width: 96px;
margin: 82px auto 70px;
line-height: 38px;

}

.news-container-list {
max-width: 1048px;
margin: 0 auto;

}

.news-container .news-container-list a {
border-bottom: 2px solid #E7E7E7;
opacity: 1;
display: flex;
flex-wrap: nowrap;
text-decoration: none;
padding: 19.5px 66px;

}

time {
font-size: 16px;
color: #21A937;

}

.news span {
background-color: #444444;
width: 80px;
height: 25px;
margin-right: 30px;
margin-left: 30px;
text-align: center;
color: #FFFFFF;
font-size: 12px;
}

.news-container-list p {
font-size: 16px;
color: #444444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

.news-button {
text-align: right;
max-width: 1121px;
padding-top: 39.5px;
}

.news-container-list-button {
color: #444444;
font-size: 16px;
line-height: 38px;
}

試したこと

中身にtext-align: left;
display: inline-block;
を指定したのですがうまくいきません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hatena19]

どのボックスのどのテキストのことでしょうか。セレクタを使って説明すると伝わりやすいでしょう。

模写コーディングなら、模写先のURLが公開できるものならそれを質問に追記してもらえたら、話がはやいかと。それが無理なら、画像を提示しするとかしてもらえるとわかりやすいです。

[web83740439]

わかりにくくて申し訳ありません。
<time><span><p>タグ全てを左端(ボーダーの左端と合わせるように）に寄せたいです。
模写先のURL→　　https://note.com/samuraibrass/n/n1622c507b9c7
現状のスクリーンショットも載せておきます。

Answer 1

模写先のURL→　　https://note.com/samuraibrass/n/n1622c507b9c7

上記に合わせるなら、提示のCSSを下記のように修正すればいいでしょう。
追加したコードに、追加した理由をコメントしてあります。

.news {
  padding-bottom: 112px;
  background-color: #f5fcf8;
}

.news-container {
  max-width: 1180px;
  height: auto;
  margin: 0 auto;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 30px;
  opacity: 1;
  list-style: none outside;
  padding-top: 29px;
  padding-bottom: 46px;
  padding-left: 0; /* デフォルトスタイルのリセット */
}

h5 {
  font-size: 24px;
  background: linear-gradient(transparent 70%, #99e5a5 70%);
  max-width: 96px;
  margin: 82px auto 70px;
  line-height: 38px;
}

.news-container-list {
  max-width: 1048px;
  margin: 0 auto;
}

.news-container .news-container-list a {
  border-bottom: 2px solid #e7e7e7;
  opacity: 1;
  display: flex;
  align-items: center; /* 上下中央配置 */
  flex-wrap: nowrap;
  text-decoration: none;
  padding: 19.5px 66px;
}

time {
  font-size: 16px;
  color: #21a937;
}

.news span {
  background-color: #444444;
  width: 80px;
  height: 25px;
  line-height: 25px; /* テキスト上下中央配置 */ 
  margin-right: 30px;
  margin-left: 30px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0; /* Flexの自動縮小させない */
}

.news-container-list p {
  font-size: 16px;
  color: #444444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-button {
  text-align: right;
  max-width: 1121px;
  padding-top: 39.5px;
}

.news-container-list-button {
  color: #444444;
  font-size: 16px;
  line-height: 38px;
}

Comments

[web83740439]

丁寧にありがとうございます。
お陰様で解決致しました。

Answer 2

pタグの行頭を揃えたいということでしょうか？
それであれば、span要素にflex-shrink:0;を加えると揃いますよ。
また、datatime属性なのですが、「.」で繋ぐのは時刻値として取れる値ではありません。
<time datatime="2020-12-22">が正しいです。

【追記】
コメントと模写先のURLを拝見しました。
.news-container .news-container-list aのpadding: 19.5px 66px;をpadding: 19.5px 66px 19.5px 0;に変更するとどうでしょうか？　左のpaddingを無くしたことで、日付部分のはじまりと下ボーダーの始まりが揃うと思います。

Comments

[web83740439]

ありがとうございます。
timeとspanとｐタグをボーダーの左端に寄せたいです。

[web83740439]

追加の記載ありがとうございました。
とてもわかりやすく端的に教えていただき、
感謝致します。

Answer 3

＜追加事項＞
こちらが現状です。
timeとspanとｐタグをボーダーの左端に寄せたいです。