二つのものの配置方法について

Question

1枚目のように二つのものを配置したいのですが、うまくいきません。

html

<div class="main1">
    <div class="box1">内容</div>
    <div class="pic"><img src="pic.png"></div>

 </div>

css

.main1 {
  width: 1280px;
  display: flex;
}

.box1{
  margin: 0 auto;
  width: 418px;
  height: 448px;
  margin:5px; padding:10px; border:1px; solid: #707070; background-color:#F0F0F0;
}
.pic{
  margin: 0 auto;
  width: 494px;
  height: 330px;

}

としてみましたが、左側のボックスがついてきません・・・
main1に対してmargin 0 autoをかけてみましたが、今度は二つとも動きませんでした。
ヒントをいただけましたらと思います。

Answer 1

自己解決しました。ありがとうございます

Comments

[kei344]

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> 後から読む人のためにも、具体的な解決手順を記載してください。