* main menu element spacing fix

* giant chamber logo shrinked in tablet view
* 404 error page is wrapped in the grid now

public/styles/main.css

@@ -61,6 +61,10 @@ section.article {
     grid-row-gap: 20px;
 }
 
+section.error {
+    grid-area: content;
+}
+
 /* mobile */
 @media only screen and (max-width: 779px) {
     .app-container {
@@ -150,7 +154,8 @@ section.article {
 
     nav > ul > li {
         display: inline-block;
-        width: 30%
+        width: auto;
+        padding-right: 30px;
     }
 
     nav ul.menu_level_1 {
@@ -163,6 +168,11 @@ section.article {
         display: inline-block;
         max-width: 20%;
     }
+
+    section.error {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
 }
 
 /* tablet */
@@ -206,6 +216,11 @@ section.article {
         max-width: 580px;
     }
 
+    img.embedded-image.keep-small-right {
+        max-width: 30%;
+        float: right;
+    }
+
     section.judge {
         width: 440px;
         margin-right: 20px;

templates/app/aspect-for-selection.phtml

@@ -2,7 +2,7 @@
 <section class="article">
     <article>
         <p>During the selection, the Board of Judges takes into consideration the following aspects:</p>
-        <img class="embedded-image" src="<?= $this->serverurl('/img/aspects_for_selection.png') ?>">
+        <img class="embedded-image keep-small-right" src="<?= $this->serverurl('/img/aspects_for_selection.png') ?>">
         <ul>
             <li>Novelty (innovation, original idea)</li>
             <li>Social responsibility</li>

templates/error/404.phtml

@@ -1,5 +1,5 @@
 <?php $this->layout('layout::default', ['title' => '404 Not Found']) ?>
-
+<section class="error">
     <h1>Oops!</h1>
     <h2>This is awkward.</h2>
     <p>We encountered a 404 Not Found error.</p>
@@ -7,3 +7,4 @@
         You are looking for something that doesn't exist or may have moved. Check out one of the links on this page
         or head back to <a href="/">Home</a>.
     </p>
+</section>