横並びの要素をブラウザ幅に収まるようにした上で、表示する幅の割合を変えたいです。

Question

実現したいこと

wrapper2クラス内のmainとasideをお手本（補足情報参照）のようにブラウザ幅に収まった上で、mainの横幅：asideの横幅＝7:３ほどになるようにしたいです。

発生している問題

display:flex、mainにwidth70%,asideにwidth30%を適用したがブラウザ幅を超え幅も思ったように変化しない

該当のソースコード

 <div class="wrapper2">
    <main>
      <section>
        <h1>タイトルテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h1>
        <p>2024/01/01 カテゴリ1</p>
        <img src="main1.jpg" alt="">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a href="#">READ MORE</a>
      </section>
      <section>
        <h1>タイトルテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h1>
        <p>2024/01/01 カテゴリ1</p>
        <img src="main1.jpg" alt="">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a href="#">READ MORE</a>
      </section>
      <section>
        <h1>タイトルテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h1>
        <p>2024/01/01 カテゴリ1</p>
        <img src="main1.jpg" alt="">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a href="#">READ MORE</a>
      </section>
    </main>
    <aside>
      <img src="author.jpg" alt="">
      <h2>Name</h2>
      <p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <h2>Ranking</h2>
      <img src="ranking1.jpg" alt="">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <img src="ranking2.jpg" alt="">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <img src="ranking3.jpg" alt="">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      <h2>Archive</h2>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
      <a href="#"><p>XXXX年XX月(XX日)</p></a>
    </aside>
  </div>

試したこと

wrapper2クラスに対してdisplay:flexを設定
mainにwidth70%,asideにwidth30%を適用

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

https://code-jump.com/demo/html/blog/

Comments

[hatena19]

提示のHTMLに下記のCSSでmainの横幅：asideの横幅＝7:３になりました。
.wrapper2 {
display: flex;
}
main {
width: 70%;
}
aside {
width: 30%;
}
提示されていないCSSに問題があると思われます。
症状の再現できるCSSを質問に追記してください。

[yumy]

@charset 'utf-8';

body {
margin: 0;
}

/* common */

h2{
font-size: 16px;
}

p{
font-size: 14px;
}

a{
font-size: 14px;
text-decoration: none;
color: black;
}

ul{
color: #333;
}

/* main */
.wrapper2 {
display: flex;
width: 100%;
}

main {
width: 70%;
}

aside {
width: 30%;
}

少し修正して(wrapper2クラスのwidthを100%にしました。)、試してみたところ7:3にはなったのですが、画像がブラウザ幅を超えてしまします。
対処法を教えていただきたいです。

[hatena19]

質問は編集できますので、CSSは質問に追記してください。
ここは通常は閉じてますので、他の閲覧者の目に入りません。
あと「画像がブラウザ幅を超えてしまう」ということも質問に追記してください。
重要な情報ですので。

Answer 1

画像がブラウザ幅を超えてしまします。

Img要素にサイズを指定しないと、画像のオリジナルサイズで表示されますので、画像サイズによっては画面からはみ出します。

お手本のサイトでは下記のように親要素幅を超えないようにmax-width: 100%を設定しています。

img {
    max-width: 100%;
}