Noissue - Updated defaults.css and refactored #navbar-container

static/css/defaults.css

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * website-defaults is distributed in the hope that it will be useful,
@@ skipping 118 matching lines @@
   /* Make fixed width images responsive */
   max-width: 100%;
   /* Remove the border on images inside links in IE 10-. */
   border-style: none; }
 
 /* Set correct display for hidden attribute in IE 10-  */
 [hidden] {
   display: none; }
 
 /*******************************************************************************
+ * Utilities
+ ******************************************************************************/
+/* Responsive widths
+ ******************************************************************************/
+/**
+ * Stretch content (e.g. images) full-width
+ */
+.full-width {
+  display: block;
+  width: 100%; }
+
+/**
+ * Center content within a (responsive) fixed width
+ */
+.container {
+  width: 1140px;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1em;
+  padding-left: 1em; }
+
+/* Device widths
+ ******************************************************************************/
+.phone-width {
+  width: auto; }
+
+.phablet-width {
+  width: 540px; }
+
+.tablet-width {
+  width: 720px; }
+
+.desktop-width {
+  width: 960px; }
+
+.large-desktop-width {
+  width: 1140px; }
+
+/* Clearfix
+ ******************************************************************************/
+.clearfix:after, .content:after,
+.clearfix:before,
+.content:before {
+  display: table;
+  content: " "; }
+
+.clearfix:after, .content:after {
+  clear: both; }
+
+/*******************************************************************************
  * Base styles
  ******************************************************************************/
 html {
   color: #212121;
   background-color: #fff;
   font-family: sans-serif;
   line-height: 1.5; }
 
-/**
- * Stretch content full-width
- */
-.full-width {
-  display: block;
-  width: 100%;
-  margin: 1em 0px; }
-
-/**
- * Center content within a (responsive) fixed width
- */
-.container {
-  width: auto;
-  max-width: 100%;
-  margin: 0px auto;
-  padding: 0px 1em; }
-
-@media (min-width: 768px) {
-  .container {
-    width: 720px; } }
-
-@media (min-width: 992px) {
-  .container {
-    width: 960px; } }
-
-@media (min-width: 1200px) {
-  .container {
-    width: 1140px; } }
-
-.clearfix:after, .content:after,
-.clearfix:before,
-.content:before {
-  display: table;
-  content: " "; }
-
-.clearfix:after, .content:after {
-  clear: both; }
-
 /*******************************************************************************
  * Content styles
  *******************************************************************************
  * 1. Document
  * 2. Headings
  * 3. Body content
  ******************************************************************************/
 .content {
   /* Clearfixed
    ****************************************************************************/
@@ skipping 199 matching lines @@
  * Buttons
  *******************************************************************************
 
 /* 1. Reset
  ******************************************************************************/
 button {
   margin: 0px;
   font: inherit;
   /* Show the overflow in IE and Edge */
   overflow: visible;
+  /* Remove rounded corners in Chrome 62+ */
+  border-radius: 0;
   /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
   text-transform: none; }
 
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  *    controls in Android 4.
  * 2. Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 html [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button; }
 
 /* Remove the inner border and padding in Firefox. */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   padding: 0px;
   border-style: none; }
 
 /* Restore the focus styles unset by the previous rule. */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText; }