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

static/css/defaults.css

Index: static/css/defaults.css
===================================================================
--- a/static/css/defaults.css
+++ b/static/css/defaults.css
@@ -131,63 +131,76 @@
   /* 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; }
 
 /*******************************************************************************
- * Base styles
+ * Utilities
  ******************************************************************************/
-html {
-  color: #212121;
-  background-color: #fff;
-  font-family: sans-serif;
-  line-height: 1.5; }
-
+/* Responsive widths
+ ******************************************************************************/
 /**
- * Stretch content full-width
+ * Stretch content (e.g. images) full-width
  */
 .full-width {
   display: block;
-  width: 100%;
-  margin: 1em 0px; }
+  width: 100%; }
 
 /**
  * Center content within a (responsive) fixed width
  */
 .container {
-  width: auto;
+  width: 1140px;
   max-width: 100%;
-  margin: 0px auto;
-  padding: 0px 1em; }
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1em;
+  padding-left: 1em; }
 
-@media (min-width: 768px) {
-  .container {
-    width: 720px; } }
+/* Device widths
+ ******************************************************************************/
+.phone-width {
+  width: auto; }
 
-@media (min-width: 992px) {
-  .container {
-    width: 960px; } }
+.phablet-width {
+  width: 540px; }
+
+.tablet-width {
+  width: 720px; }
 
-@media (min-width: 1200px) {
-  .container {
-    width: 1140px; } }
+.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; }
+
+/*******************************************************************************
  * Content styles
  *******************************************************************************
  * 1. Document
  * 2. Headings
  * 3. Body content
  ******************************************************************************/
 .content {
   /* Clearfixed
@@ -396,16 +409,18 @@
 
 /* 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.
  */