Responsive design with flexbox and mediaqueries

Replace the <div class="container"></div> with the main tag, there is no need for the <div class= "main"></div>,, the<div class= "main-img"></div> and the<div class= "main-bold"></div>, put all the text content in on div. replace<div class= "main-bold"></div> with <h1></h1> and <div class= "main -p"></div> with <p></p> sample html outline: <main><img><div class="main-text"><h1></h1><p></p></div></main> To center a content on a page, add min-height:100vh; justify-content: center; to the body and remove the height value in the body. give the main or .container a padding value , a width value and background-color of white. there is no need for display: flex and its properties. Give the .main-text a padding top and bottom value. give the p opacity :0.5; Hope am helpful HAPPY CODING