temporary CSS updates

src/components/FeaturedPost/FeaturedPost.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const FeaturedPost = ({ post }: Props) => {
   return (
-    <Grid>
+    <CustomGrid>
       <GridItem className="w-16">
         <PostLink href={`/article/${post.slug}`}>
           <PostWrapper>
@@ -20,10 +20,14 @@ const FeaturedPost = ({ post }: Props) => {
           </PostWrapper>
         </PostLink>
       </GridItem>
-    </Grid>
+    </CustomGrid>
   )
 }
 
+const CustomGrid = styled(Grid)`
+  margin-bottom: 108px;
+`
+
 const PostWrapper = styled.div`
   margin-top: 16px;
   padding: 16px 0;

src/components/Navbar/Navbar.tsx

@@ -38,8 +38,8 @@ const Container = styled.nav`
   border-bottom: 1px solid rgb(var(--lsd-theme-primary));
   position: fixed;
   top: 0;
-  width: calc(100% + 16px);
-  max-width: ${uiConfigs.maxContainerWidth + 16}px;
+  width: 100%;
+  max-width: ${uiConfigs.maxContainerWidth + 24}px; // TBD
   background: rgb(var(--lsd-surface-primary));
   z-index: 100;
 

src/components/Searchbar/SearchbarContainer.tsx

@@ -40,7 +40,7 @@ export function SearchbarContainer({ children, onUnfocus = nope }: Props) {
 
 const SearchBarWrapper = styled.div<Props>`
   display: block;
-  width: calc(100% - 16px);
+  width: 100%;
   background: rgb(var(--lsd-surface-primary));
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
   border-top: 1px solid rgb(var(--lsd-border-primary));
@@ -53,5 +53,6 @@ const SearchBarWrapper = styled.div<Props>`
     position: fixed;
     top: ${uiConfigs.navbarRenderedHeight - 1}px;
     z-index: 100;
+    max-width: ${uiConfigs.maxContainerWidth + 40}px; // TBD
   }
 `