So I'm doing The Odin Project and I'm on the Landing Page project. My problem is that I don't know how why my text is within my flexbox when it's supposed to be underneath it. I don't know what is wrong as other projects I've seen have code similar to mine and their text goes underneath and not within their flexboxes. My HTML and CSS code are below.
Odin project:
My project:
I've tried having the text as a <p> and taking it outside the flexbox div
*{ margin: 0; } body{ background-color:#1F2937 ; height:1300px;}.header_content h1{ display:inline-block; margin-left: 300px; padding-bottom: 30px;}ul{ display:inline-block; margin-left: 800px;}li{ display:inline-block; margin-left: 25px;}.blue_box{ display:flex; margin-left: 300px;}.box_writing{padding-right: 80px;}.placeholder{ display:inline-block; background-color: #808080; height: 300px; width: 700px; color:white}.placeholder p{text-align: center;line-height: 300px;}.blue_button{ padding-top: 12px;}button{background-color: #3882F6;border-radius: 6px;border: none;width: 130px;height: 35px;color: white;}.boxes { padding-top: 400px; color: #EEEEEE; }.box1 { padding: 150px; background-color: #ffffff;}.title{color: #1F2937;font-size: 36px;text-align: center;position: relative;top: -100px;}.info_boxes{display: flex;justify-content: center;}.one, .two, .three, .four{border: 3px solid #3882F6;border-radius: 10px;height: 150px;width: 150px;margin: 10px;}.descript1{color: #1F2937;}.box2 { padding: 150px; background-color: #e5e7eb;}.box3 { padding: 100px; background-color: #ffffff;}```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Odin Landing Page</title><link rel="stylesheet" href="index.css"></head><body><div><header><div class="header_content"><h1>Header Logo</h1><ul><li>header link one</li><li>header link one</li><li>header link one</li></ul></div></header></div><div class="blue_box"><div class="box_writing"><h1>This website is awesome</h1><p>This website has some subtext that goes here under the</p><p>main title. It's a smaller font and the color is lower</p><p>contrast</p><div class="blue_button"><button type="button">Sign up</button> </div></div><div class="placeholder"><p>this is a placeholder for an image</p></div></div><div class="boxes"><div class="box1"><!--box1 is the white box--><div class="title"><p>some random information</p></div><div class="info_boxes"><div class="one"><div class="descript1"> this is some subtext under an illustration or image</div></div><div class="two"></div><div class="three"></div><div class="four"></div></div></div><div class="box2"></div><div class="box3"></div></div></body></html>