Notebookbar: main-nav: Fix last child being glued to the edge

Before this commit the .main-nav's width had bigger width than the
webview due to borders not being factored in. This was particular
visible for integrators that have the close button toggled off and
that have no "EnableShare" where the last sidebar icon was "glued" the
right edge of the web view.

Cases where this is possible to test:
- Using the make run Edit mode urls in Tabbed view
- Places where Collabora Online is integrated with close and
share buttons. Example: Moddle

Signed-off-by: Pedro Pinto Silva <[email protected]>
Change-Id: Ie189ed780080cda69d3d41e425a047c45d0e69e9

browser/css/menubar.css

@@ -138,6 +138,7 @@ nav.hasnotebookbar #save.saved::after {
 	display: none;
 }
 .main-nav {
+	box-sizing: border-box;
 	height: var(--header-height); /* on mouseover menubar items, border emerges */
 	width: 100%;
 	background: var(--color-background-lighter);