I am new to web development and was playing around with HTML and CSS. I used a <p> tag with a bunch of text in it, and it's not fully visible on the screen. I can barely see half a character on the left side of the screen, and I am unsure what is wrong.
The element has a class intro_text under the section tag. Initially, I hadn't played around with CSS for the <p> tag or intro_text class when this issue occurred. However, after using display: flex and justify-content: center, a few words started appearing on the left side of the screen. I am still not sure what the issue is or what is causing it.
HTML:
<!DOCTYPE html> Document<header><h1 class="website_title"> Anime Site </h1><nav class="navigation"><ul><li>Section1</li><li>Section2</li><li>Section3</li><li>Section4</li></ul></nav><div class = "logo"><img src="./images/anime_logo.jpeg" alt="Anime Logo" class="logo_img"></div></header><main><section class="section1"><div class="intro_text"> <p> This is some text about the website, so let'sThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view. go. This text is getting bThe .logo .logo_img class applies a margin-top of 150px and the .section1 class applies a margin-top of 300px. These large margins might be pushing content, including your <p> tag, off the visible part of the screen, especially on devices with smaller screens. Try reducing these margins to see if it brings the text back into view.igger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger and bigger</p></div><figure class="images_anime_container"><img class="images_anime" id="image_isekai" src="./images/isekai_image.avif"><figcaption> Love characters who get transported to a magical or fantasy world where they have adventures? It’s like they’re suddenly living in a completely different place with its own rules and challenges. If yes, welcome to the world of Isekai anime</figcaption></figure><figure class="images_anime_container"><img class="images_anime" id="image_mecha" src="./images/mecha_anime.avif"><figcaption> Are you into giant robots and thrilling battles? Mecha anime features massive robots piloted by humans, often set against the backdrop of futuristic wars or intense conflicts. It's a world where technology and action combine to create epic stories. If this sounds exciting, then mecha anime is definitely for you!</figcaption></figure><figure class="images_anime_container"><img class="images_anime" id="image_adventure" src="./images/adventure_anime.jpeg"><figcaption> Love the thrill of exploration and epic journeys? Adventure anime takes characters through exciting landscapes and challenges, from mystical lands to uncharted territories. It’s all about quests, discoveries, and sometimes, finding oneself along the way. If you’re up for an adventure, these anime will take you on unforgettable journeys!</figcaption></figure><figure class="images_anime_container"><img class="images_anime" id="image_romance" src="./images/romance_anime.jpeg"><figcaption> Do you enjoy stories about love and relationships that tug at your heartstrings? Romance anime explores the complexities of love and emotions through beautifully crafted narratives. Whether it's a first crush or a deep bond, these stories will immerse you in the journey of the heart. If you're a fan of romance, these anime are a perfect match!</figcaption></figure></section></main>CSS:CSS Code Image
.website_title{float: left;display: inline-block;}.navigation ul{list-style: none;float: right;}.navigation ul li{display: inline;margin: 10px;}.navigation ul li:hover{ text-decoration: underline;}.logo .logo_img{height: 400px;width: auto;margin-top: 150px;}.logo{ display: flex; justify-content: center;}.section1{margin-top: 300px;display: flex;justify-content: center;align-items: center;}.images_anime{height: 300px;width: 250px;margin: 20px;}.intro_text p{display: flex;justify-content: center;}I have tried Stack Overflow, which suggested the issue stemming from using margin after float somewhere...and removing the margin part did not help (Note that this wasn't for the p tag or intro_text class but for .navigation ul li).
Currently, I have done this and it kinda helps but doesn't really. I can see about 2 words on the left of my screen.
.intro_text p{display: flex;justify-content: center;}