Reasons for creating this PR

The layout of the top header looks funny on very wide screens, because the contents (logo, navigation links etc.) are placed near the edges of the page.

This PR changes the header elements to use Bootstrap Grid classes (row, col) and then sets a max-width of 1460px for the contents. Also some margins and paddings are adjusted. The end result is that the navigation elements at the top are kept in the middle of the page, not near the edges.

Link to relevant issue(s), if any

• part of Epic: Landing Page #1480

Description of the changes in this PR

• use Bootstrap Grid classes for header
• add max-width 1460px for the header elements
• adjust margins and paddings

Known problems or uncertainties in this PR

I'm still not 100% happy with the alignment of the left and right edges. Especially on some zoom levels / page widths the edges don't always align nicely.

One problem here is that the Skosmos logo used within vocabularies (negative version, for use on a dark background) includes a lot of empty space around the logo itself within the svg file, making it hard to align. I tried two methods of cropping the svg to its content, but when I replaced the svg file with a cropped version, the logo just failed to display at all. I can't figure out why, but in any case, here are the two cropped logos (they look a bit funny here if you have a white background) in case they are useful:

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)