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:)
.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;}<section id="features" class="introduction"><h2>My hobbies!!!</h2><div class="container"><div class="box"><img src="https://picsum.photos/200/300"><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="https://picsum.photos/200/300"><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="https://picsum.photos/200/300"><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> At the moment I'm getting this outcome:My website
When I want it to look like this:Example on this website