Adjust flex settings for main section

Got rid of #container and allowed main to position the grid directly.
Previously it had adjusted the size of #container but didn't effect the
size of #sketch, so #sketch would overlap its borders and the control
bar. Now #sketch adjusts with window size.

index.html

@@ -12,7 +12,7 @@ <h1>ECMA-sketch</h1>
       <div></div>
     </header>
     <main>
-      <div class="main-flex"></div>
+      <div class="main-flex-left"></div>
       <!-- Control section -->
       <div id="control-div">
         <div class="control-flex"></div>
@@ -62,11 +62,10 @@ <h1>ECMA-sketch</h1>
         <div class="control-flex"></div>
       </div>
       <!-- Grid section -->
-      <div id="container">
+      <div id="sketch">
         <!-- Anchor for the grid produced by createGrid -->
-        <div id="sketch"></div>
       </div>
-      <div class="main-flex"></div>
+      <div class="main-flex-right"></div>
     </main>
     <footer>
       <div></div>

style.css

@@ -35,33 +35,29 @@ main {
   flex: 1;
   display: flex;
   justify-content: space-around;
+  align-items: center;
+  gap: 5vw;
   margin: 0 1vw;
   border-radius: 1%;
 }
 
 /* Container for the controls */
 #control-div {
-  flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }
 
-/* Container for the sketch grid */
-#container {
-  flex: 5;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2vh 2vw;
-}
-
 /* Empty divs on sides of main section to aid spacing */
-.main-flex {
+.main-flex-left {
   flex: 1;
 }
 
+.main-flex-right {
+  flex: 5;
+}
+
 /* Two divs for draw settings */
 #controls,
 #color-div {
@@ -135,7 +131,7 @@ main {
 #sketch {
   aspect-ratio: 1;
   background-color: #fbb;
-  height: 100%;
+  height: 85vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;