adjusting the styles

src/app/ideas/ideas.component.html

@@ -5,7 +5,7 @@ <h1 class="centre">Ideas</h1>
     <P>
         This website is at a <span class="underline">very</span> early stage of development. I am learning a chart
         library (Chart.js) that I've not used before. So I'm still getting to grips with its capabilities. I aim to make
-        the charts a <span class="underline">lot</span> more interactive.
+        the charts a lot more interactive.
     </P>
 
     <P>
@@ -14,9 +14,8 @@ <h1 class="centre">Ideas</h1>
 
     <ul>
         <li>a comparison with Brian Statham, the other great post-war Lancashire Test bowler;</li>
-        <li>an analysis of home and away Test performance</li>
-        <li></li>
-        <li></li>
+        <li>an analysis of home and away Test performance; and</li>
+        <li>comparison with other bowlers in his era.</li>
     </ul>
 
     <p>

src/app/menu/menu.component.scss

@@ -20,7 +20,7 @@
     background-color: beige
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 667px) {
     .larger-screen-menu {
         display: none;
     }
@@ -30,7 +30,17 @@
     }
 }
 
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 668px) {
+    .smaller-screen-collapse-menu {
+        display: none;
+    }
+
+    .nav-menu {
+        padding: 0% 10%;
+    }
+}
+
+@media only screen and (min-width: 992px) {
     .smaller-screen-collapse-menu {
         display: none;
     }

src/styles.css

@@ -74,14 +74,14 @@ body {
         text-align: center;
         font-weight: bold;
         position: sticky;
-        top: 0px;
+        top: 55px;
         padding: 10px 0px;
     }
 
     .info-icon {
         visibility: hidden;
     }
-    
+
 }
 
 /* Larger devices (769px and up) */
@@ -133,4 +133,4 @@ body {
     .info-icon {
         visibility: visible;
     }
-}
+}