Hi im reworking on my portfolia and i came across a problem

I have been redoing my portfolio trying to improve it and i will continue to add onto it and work on improving it more and more as i learn but i came across one problem and its that my website has a ridiculous widht and ive experimented and i just cant figure out how to make it smalller since my text just goes through the screen to the point to where you have to scroll to the right to see the rest of my filler text for Why i started to learn to code.
Help would be very much appreciated!!!
My first personal portfolio (being tweaked)

Here’s a hint…What does the pre tag do? When and why would you use it?

On a side note, run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address.

You need this after you figured out the above question.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

Pay attention to your indentation. It’s difficult to see which element is the child and which element is the parent. An element that is within another element is the child and have to be indented deeper than the parent.

So, as @Roma said, the <pre> tag ensures that, in very basic language, the web browser will not ignore any whitespace characters (including newline characters and tabs), and other formatting characters, because of which, your text will span out the page until the whole text is displayed. There are multiple methods of solving this:

  1. Remove the pre tag and use other tags like the p tag.
  2. Use CSS and set the width of the parent container and then set the word-wrap: normal|break-word|initial|inherit; property as well.
  3. If you want to continue with the pre tag, you can add your own formatting characters to the text, or Html tags like the br tag.

Hope this helps!