画像と文字を横並びにはしたのですが、ここからウインドウの横幅に幅半分ずつ画像と文字の部分を並べたいです。

Question

今、画像と文字の部分を横並びにはできたのですが、ウインドウの幅に画像と文字を並べたいのですが、画像と文字の間が空いてしまいます。隙間なくウインドウの横幅に横並びさせた画像と文字の部分を同じ横幅で均等に並べたいのですが、上手くいきません。

](eab5768e35988c18a3507dee89442843.png)

したいことは、下の画像のような感じに、ウインドウ幅いっぱいに画像と文字を、画像と文字の部分の幅を、ウインドウの半分の幅に均等に横並びさせたいです。

どのようにしたら上手く、画像と文字の部分をウインドウの幅に半分ずつ均等に横並びさせることができるでしょうか？
画像をimgタグで表示させていますが、他の方法で表示させる方がやりやすいでしょうか？

コードはこの様に書いています。

<div class="main-section_content">
        <div class="content1">
          <div class="photo1">
            <img src="images/photo01.jpg" alt="フォト1">
          </div>   
          <div class="text1">
            <h4>1.テキストテキストテキストテキスト</h4>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
          </div>
        </div>
</div>

.main-section_content {
  width: 100%;
  margin: 0;
  padding: 0;
}

.content1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-grow: 1;
}

.photo1 img {
  width: 514px;
}

.text1 {
  width: 514px;
}

footer {
  background-color: gray;
  padding: 40px 0;
}

まだ制作途中なので、したい画像の見本と、文字の部分の色など色々違って、申し訳ございません。
上手く説明できなくて、申し訳ございません。
よろしくお願いします。

Answer 1

.photo1 imgと.textの幅が固定値になっているので、ここを可変式に変えてあげれば良いと思います。
また横幅を等間隔にさせたいとのことなので、.photo1と.textで幅を等間隔にしてあげるようにすると良さそうです。

イメージとしては.photoと.textで横並びにさせているので、その部分でまず幅を等間隔（50%）にしてあげて、その中にある.photo imgは等間隔（50%）にした中でぴったり表示（100%）にしてあげるイメージです。

.photo1 {
  width: 50%;
}

.photo1 img {
  width: 100%;
}

.text1 {
  width: 50%;
}

Answer 2

.main-section_content {
  width: 100%;
  margin: 0;
  padding: 0;
}

.content1 {
  display: flex;
}

img {
  width: 100%;
  vertical-align: bottom;
}

.photo1,
.text1 {
  width: 50%;
}

.text1 {
  background: #ccc;
  padding: 10px;  
}

上記の方法でご希望通りになると思います。