NEWS HOMEPAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

Glad to hear your feedback @Namonaki0, I will update my code as soon as possible.

And another thing is you can use backticks (`) for sharing/highlighting a code snippet.

For example, You can try to wrap the "main__headline" with backticks

`main__headline`

Result: main__headline

@iHesh84 Thank you for noticing the issue you're facing.

But I can't test my application unless you provide the resolution of your screen where you faced the issue.

Can you provide your device resolution ?

For Example: This Resolution 1440 x 900 is for standard HD Laptop Screen.

@0xAbdulKhalid

The monitor is 1920 x 1080. Of course while using Chrome I can't use the full height.

@0xAbdulKhalid

I would suggest to wrap the entire page in a max-width wrapper of 1440px en the contentss itself in a container with a max-width of 1110px.

for instance:

body {
 height: 100%
}

.page-container {
  display: grid;
  place-content: center;
  max-width: 1440px
 min-height: 100%
(to center the container on the screen)
}

.content-container {
max-width: 1110px
margin: 0 auto (to center within the container above)

If you decide to go this way you should also tweak the paddings and margins of your header and main.