I've been trying to center the left and right panel below the header so that header and those panels are in one line (text from the header is exacly below the text from the lower section from both sides).But I can't make the items from the left of my side panel to wrap (the long paragraph).
import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');body { font-family: "Roboto", sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0;}header { background-color: #1F2937; display: flex; justify-content: space-around; align-items: center; padding: 20px;}.logo { font-size: 24px; color: #F9FAF8; font-weight: 900;}.links { font-size: 18px; color: #E5E7EB; display: flex; gap: 18px;}.hero { background-color: #1F2937; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px;}.hero-left { display: flex; flex-direction: column; justify-items: center; align-items: flex-start;}.hero-right { display: flex; justify-content: flex-start}.hero-title { font-size: 48px; font-weight: 900; color: #F9FAF8;}.hero-text { font-size: 18px; color: #E5E7EB; font-weight: 300;}.sign-up { cursor: pointer; padding: 5px 20px; color: #fff; background-color: #3882F6; border-radius: 10px; font-weight: 700; border: none;}.image-placeholder { background-color: gray; height: 200px; width: 450px; text-align: center; display: flex; justify-content: center; align-items: center;}ul { list-style-type: none; margin: 0; padding: 0;}a:hover,a:visited,a:link,a:active { text-decoration: none; color: inherit;}<header><div class="logo">Header Logo</div><ul class="links"><li><a href="#">header link</a></li><li><a href="#">header link</a></li><li><a href="#">header link</a></li></ul></header><div class="hero"><div class="hero-left"><p class="hero-title">This website is awesome</p><p class="hero-text">This website has some subtext that goes under the main title.It's smaller font and the color is lower contrast</p><button class="sign-up">Sign up</button></div><div class="hero-right"><div class="image-placeholder"><p>this is placeholder for an image</p></div></div></div>I've been trying to use max width property for the left side but it won't give me the exact outcome and it's probably not a good way to solve this