100% header width isn't 100 %

The CMS Questions
1

This morning I was able to colorized my header and footer, thanks to @texnixe.

My footer was shown as expected, but the header was much smaller in width. No problem I thought and added the line " width: 100%;" to my header section, but after refreshing my browser tab the header stayed at it’s old width.

So I need, cause I’m a PHP- and CSS-rookie, once again your kindfull help.

The respective parts of .header / .footer configuration looks as follow:
/* ----- 3.1 Header ------------------------------------------------------- */

.header {
width: 100%;
color: white;
background-color: #474747;
}

/* ----- 3.3 Sticky Footer ------------------------------------------------ */

.footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 1.5rem 0;
text-align: center;
font-size: .875rem;
color: white;
background-color: #474747

header_width
header_width1581×720 22.9 KB

2

Do you know how to inspect elements and the styles applied to them in your browsers dev tools? Which browser are you using most of the time?

Here is an intro for Chrome for example: https://developers.google.com/web/tools/chrome-devtools/css/. The same can be done in Firefox, Safari or other browsers as well.

This lets you click on an element and then see what styles are applied. You can also then change your CSS in the browser on the fly to see immediately what happens. Once you have the desired result, you can then modify your stylesheets.

In the case of the header, it has several classes applied, among them the wrap and wide classes. These limit the max-width of the header and to change this, you have to set a different max-width on the header class.

Please understand that this is a Kirby forum where we answer Kirby specific questions rather then general HTML/CSS stuff. If you can’t find good resources that give you head start with CSS, we could certainly recommend some.

3

Adding to Sonja’s explanations:
If you understand German (“GER” in your profile), you can look at wiki.SELFHTML.org for details of html, css and more in GERMAN language.

4

I would suggest going through the HTML + CSS/SASS courses on Team Treehouse. Alternatively, if you happen to have a LinkedIn Premium account, this gives you access to all the courses on Lynda.com. Theres also a bunch of courses on Udemy, and theres often good deals on “learn to code” bundles over at StackSocial. Currently they have a HTML + CSS for rookies course for $9.

5

I think.there are enough good free resources out there

6

First, thankyou all for your kind suggestions. I’ve started learning PHP/CSS in the middle of last week to become more experienced.

For me the most importend hint was the one with “elements inspection”, so I finaly reached me goal.

Wish you all a nice week and once again thank you so much for all your suggestions.

Greetings,
ank0m