[Resolved] CSS Formatting For Header Sections – Unequal Widths

[Mary Pearson]

Can you please tell me the correct way to format three unequal header sections. I know they need to add up to 100% but I just can’t figure out how based on the following from documentation.

.header-section > div {
width: 33.33333%;
}

Many thanks

[Leo]

Hi Mary,

If you are using the same HTML here:
https://docs.generatepress.com/article/split-header-three-sections/

Then you would replace this part of the CSS:

.header-section > div {
    width: 33.33333%;
}

With this:

.header-section .header-section-1 {
    width: 20%
}
.header-section .header-section-2 {
    width: 60%
}
.header-section .header-section-3 {
    width: 20%
}

Let me know if this helps 🙂

[Mary Pearson]

Thank you so much Leo!!!!

[Leo]

No problem 🙂

[Author]

Posts