Chore/fix edit nav bar styles (#1466)

* fix: nav menu template styles

* fix: add spacing for legacy nav section

* chore: remove unused attributes

* chore: move flex into className

src/components/navbar/NavSection.jsx

@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import PropTypes from "prop-types"
 import { useState, useRef } from "react"
@@ -269,7 +270,7 @@ const NavSection = ({
           </div>
         )}
       </Droppable>
-      <div className="d-flex justify-content-between mt-4">
+      <Box mt="2rem" mb="1rem">
         <Select
           ref={selectInputRef}
           className="w-50"
@@ -278,14 +279,15 @@ const NavSection = ({
           options={sectionCreationOptions}
         />
         <Button
+          mt="1rem"
           onClick={sectionCreationHandler}
           isDisabled={!newSectionType}
           variant="solid"
           colorScheme="primary"
         >
           Create New Menu
         </Button>
-      </div>
+      </Box>
       <span className={elementStyles.info}>
         {`Note: you can specify a folder ${
           hasResourceRoom ? `or resource room ` : ``

src/templates/NavBar.jsx

@@ -15,9 +15,10 @@ const NavDropdownSection = ({ children, link }) => (
 
 const TemplateNavBar = ({ links, collectionInfo, resources }) => (
   <nav className="navbar is-transparent flex-fill">
-    <div className="bp-container">
+    <div className="bp-container is-flex">
       <div className="bp-container is-fluid margin--none navbar-menu h-100">
         <div className="navbar-start">
+          <div className="navbar-item sub-link" />
           {links.map((link, linkIndex) => {
             if (link.collection) {
               return (