Move the additional book margin to the MainContent component

Author: jacbn

src/app/components/elements/Book.tsx

@@ -57,7 +57,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                 thenRender={(definedBookIndexPage) => {
                     return <>
                         <BookSidebar book={definedBookIndexPage} urlBookId={bookId} pageId={pageId} />
-                        <MainContent className="mt-4">
+                        <MainContent className="my-4">
                             {pageId
                                 ? <ShowLoadingQuery
                                     query={bookDetailPageQuery}
@@ -68,7 +68,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                                     <EditContentButton doc={definedBookIndexPage}/>
                                     <TeacherNotes notes={definedBookIndexPage.teacherNotes} />
                                     {definedBookIndexPage.value && <div>
-                                        <div className="book-image-container book-height-lg d-none d-sm-block mx-3 mb-4 float-end">
+                                        <div className="book-image-container book-height-lg d-none d-sm-block mx-3 float-end">
                                             <img src={definedBookIndexPage.coverImage?.src} alt={definedBookIndexPage.title} />
                                         </div>
                                         <Markup className="d-contents" trusted-markup-encoding={"markdown"}>{definedBookIndexPage.value}</Markup>
@@ -78,7 +78,7 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
                                             <div className="flex-grow-1">
                                                 <IsaacContentValueOrChildren {...definedBookIndexPage.children[0] as ContentDTO} />
                                             </div>
-                                            <div className="book-image-container book-height-lg d-none d-sm-block mx-3 mb-4 float-end">
+                                            <div className="book-image-container book-height-lg d-none d-sm-block mx-3 float-end">
                                                 <img src={definedBookIndexPage.coverImage?.src} alt={definedBookIndexPage.title} />
                                             </div>
                                         </div>