HTML、CSSを使ってコードを書く際にflexを使って画像を横並びにしたい

Question

HTML5とCSS3を書いているのですがphoto01～06の画像を横並びにすることができません。flexを使って横並びにするにはどうしたらよいか教えていただけませんか。写真はHTMLのコードで本文に書いてあるのがCSSのコードです。
body {
font-size: 100%;
color: black;
}

#logo {
width: 100%;
height: 150px;
background-image: url(img/logo01.jpg);
background-size: cover;
color: white;
font-size: 40pt;
margin: 0px auto;
}

• {
  margin: 0px;
  padding: 0px;

}

main {
width: 100%;
background-color: #eee;
display: flex;
margin: 0px auto;
}

footer{
width: 100%;
height: 50px;
background-color: blue;
margin: 0px auto;
}

#cont {
width: 70%;
background-color: yellow;
min-height: 400px;
}

#menu {
width: 30%;
background-color: gold;
min-height: 400px;
}

@media screen and (max-width: 600px) {
main {
flex-wrap: wrap;
}
#cont {
width: 100%
flex-wrap: wrap;
}
#menu {
width: 100%
}
}
.photo {
width: 200px;
margin-top: 10px;
margin-left: 10px;

}
img {
width: 100%;

}

Answer 1

全体的にどのようなレイアウトにしたいのか不明ですが、
6つの画像を横並びにするなら、親要素の#contにdisplay: flex;を設定してください。

#cont {
  display: flex;
}

あとは折り返しを許容するのか、幅をどうするのか、などで他のプロパティの設定も必要になるとは思いますが、その辺は不明なので、ご希望に合わせて設定してください。