For the widht , try pasting this code in Appearance> Customize> Add CSS.

div#page {
    max-width: 100%;
}

.singular .entry-content {
    width: 100%;
}

For the color of the top portion of the page, put in the same place the next code.

This is for the background, you can change “black” to another color.

header#branding {
    background: black;
}

This is for the text color, you can change “white” to another color.

h2#site-description, h1#site-title span a {
    color: white;
}

Keep in touch!

Thanks for your advice.

I got it done with following steps:-

Appearance -> Customize -> Additional CSS
adding following code;

div#page {
    max-width: 100%;
}
.singular .entry-content {
    width: 100%;
}header#branding {
    background: lightblue;
}

-> Publish

I retain Red text color

For changing the background color on lower page, what coding shall I add?

Thanks

Regards

h2#site-description, h1#site-title span a {
    color: white;
}

This is for the text color, you can change “white” to another color.

When you say “lower page”, do you refer the block that says “Proudly powered by WordPress”?

You forgot to add this code:
……

No. Before posting I already selected
Appearance -> Customize -> Color -> Header Text Color
Red

I just retain the red color.

When you say “lower page”, do you refer the block that says “Proudly powered by WordPress”?

Yes. Also the main body above it.

Thanks

Also this website encounters problem when browsed on Firefox, but with no problem when browsed on Google Chrome. I’ll start a new posting.

Regards

div#main , div#primary , footer#colophon div#site-generator {
    background-color: red;
}

This code is for de font color of the footer section (“Proudly powered by WordPress”), only change the value “white” to another color.

div#site-generator a.imprint {
    color: white;
}

Regards!!

 div#page {
    max-width: 100%;
}
.singular .entry-content {
    width: 100%;
}header#branding {
    background: lightblue;
}
div#main , div#primary , footer#colophon div#site-generator {
    background-color: lightyellow;
}
div#site-generator a.imprint {
    color: blueviolet; font-size: 25px;
}

font-size: 25px; #change font size

But
font-weight: bold; #does’t bold the phrase?

Is there a coding to increase the thickness of the line above the phrase?

Thanks

I think I need to read again;
CSS Introduction
https://www.w3schools.com/Css/css_intro.asp

I learned it before but rarely applying the codes

Regards

To increase the thickness of the line above the phrase paste this code and you can change the “px” value (thickness increases when placing a bigger number) and the “black” value to another color.

div#site-generator {
    border-top: 4px solid black;
}

Keep in touch!

div#site-generator {
    border-top: 8px solid blue;
}

works

All video are not in the center. How to center all of them globally instead of adding;
[center] .... [/center]
to each of them?

Is it possible to change the background color of the main body above the blue line?

Regards

div#site-generator a.imprint {
    font-weight: 1000;
}

This code is for the background color of the main body above the blue line:

div#main, div#primary, div.entry-content pre  {
    background-color: red;
}

This code is for the background color of the footer below the blue line:

footer#colophon div#site-generator {
    background-color: blue;
}

To center the videos, go to edit page and there should be an option to center the video block, i’m not able to center them through code.

Regards!