fixed displaying bug in safari

src/app/components/about/about.component.html

@@ -1,3 +1,4 @@
+<div id="about">
 <div id="text0" style="text-align: center;">
   <h1>Greenvironment</h1>
   <br> <br> <br> <br> <br>
@@ -17,3 +18,4 @@
   <br>
   <a mat-raised-button class="link-button" routerLink="/login">Login</a>
 </div>
+</div>

src/app/components/about/about.component.sass

@@ -3,6 +3,12 @@
 @import '~@angular/material/theming'
 @import '../../../styles/greenvironment-material-theme.scss'
 
+#about
+  position: fixed
+  width: 100%
+  height: calc(100% - 56px)
+  overflow: scroll
+
 #text0, #text2
   padding: 2em
   max-width: 100%

src/app/components/feed/feed.component.html

@@ -30,7 +30,7 @@
     <mat-card id="info">      
       <mat-card-header>
         <mat-card-title >
-          You are not logged in. Do you want to post something?
+          You need no log in to post something.
         </mat-card-title>
       </mat-card-header>
       <mat-card-content>

src/app/components/main-navigation/main-navigation.component.sass

@@ -1,6 +1,5 @@
 .mat-sidenav-container 
-  margin-top: 56px
+  height: 100vh
-  height: calc(100vh - 56px)
 
 .sidenav 
   width: 200px
@@ -22,6 +21,9 @@
   .mat-tab-link
     height: 56px
 
+.mat-sidenav-content
+  padding-top: 56px
+
 #link-box
   padding: 0.5em