I really need help with using flexbox!!! I got some code from on here (which was brilliant!), however when I entered in all the code and view the website in full screen the images and text below stay attached to the left margin!!! Im wondering is there anything I can do to center it all? (HTML and CSS shown below:)HTML:
<section id="features" class="introduction"><h2>My hobbies!!!</h2><div class="container"><div class="box"><img src="./images/dice2.jpg"><h1>hello box1</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p></div><div class="box"><img src="./images/console.jpg"><h1>box2</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p></div><div class="box"><img src="./images/birds2.jpg"><h1>box3</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique molestias hic velit, ipsum facere nemo minus distinctio est quidem neque.</p></div></div></section> CSS:
type here .introduction {background-color: #8CB9BD;}h1 {font-family: "Oleo Script", system-ui; font-weight: 700; font-style: normal;}.text-center { text-align: center!important;}container{ display:flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;}img{ width:100%; height:auto;}.box{ display:flex; flex-direction: column; align-items: center; justify-content: center; max-width:25rem; min-width:18rem; margin: 10px; text-align: center;} h2 {font-family: "Oleo Script", system-ui; font-size: 40px; padding-bottom: 50px; text-align: center; padding-top: 30px;}At the moment im getting this outcome :My websiteWhen I want it to look like this:Example on this website