Why my text looks so dim and doesn't fit?

Does anyone know how to fix this? Code: https://codepen.io/Sampsa96/pen/YzqKREp

Comments

[JoelBonetR 🥇]

Sincerely I think you must better build it from scratch again.
You need a "grid system" for making it responsive and fluid across different resolutions.
You can use Flex that deals with that out of the box for example then you can add content and extra styling over your basic structure.

Check this post:
dev.to/joelbonetr/building-a-flex-...

then use p html tags for text inside your columns, div as wrappers for styling some blocks and so...
By the way center tag was removed since HTML5, you must use CSS to center elements (which is easy with flex, simply add a div wrapper with display: flex and justify-content: center csss properties:values to this parent wrapper).

[Paul Requillart-Dole]

Delete .header{font-size:200%}

[Kenneth VdBerghe]

You added this into your css:

header {
  // some styling...
}

instead of targetting the div with ID header:

#header {
  // some styling...
}