Fixed Sponsor buttons layout

Author: monty2464

src/pages/sponsors/Sponsors.tsx

@@ -15,20 +15,22 @@ import Contact from '../general/contact/Contact'
 // Custom styles
 import Styles, { SponsorImages } from './SponsorsStyles'
 
-const brochure = `https://onedrive.live.com/?authkey=%21AHOgLg076B6sBgc&id=
-35ECBC1F69BC7768%21114&cid=35ECBC1F69BC7768&parId=root&parQt=sharedby&o=OneUp`
+
 const Sponsors = (): React.ReactElement => {
 	return (
 		<Styles.SponsorContainer>
 			<Styles.TitleContainer className='title-container'>
 				<h2 className='title'>Sponsors</h2>
 				<AiOutlineDash/>
 			</Styles.TitleContainer>
+			<Styles.SectionHeader>
+				<div className='button-container'>
+					<Button text='Become a Sponsor' size='large' source={'https://forms.gle/pAfv3VBYJJXooiU38'}/>
+					<Button text='Temple Robotics Brochure' size='large' source={`https://onedrive.live.com/?authkey=%21AHOgLg076B6sBgc&id=
+				35ECBC1F69BC7768%21114&cid=35ECBC1F69BC7768&parId=root&parQt=sharedby&o=OneUp`}/>
+				</div>
+			</Styles.SectionHeader>
 			<div className='img-container' id='centered-img'>
-				<Button source={'https://forms.gle/pAfv3VBYJJXooiU38'}
-					text='Become a Sponsor' size='large' className='becomeSponsor'/>
-				<Button source={ brochure }
-					text='Temple Robotics Brochure' size='large' className='becomeSponsor'/>
 				<h1 className='title'>Current Sponsors</h1>
 			</div>
 			<div className='img-container' style={{background: '#053a92'}}>

src/pages/sponsors/SponsorsStyles.tsx

@@ -60,4 +60,21 @@ export default class SponsorsStyles {
 			${FONT_FAMILY.PAGE_TITLE}
 		}
 	`
+
+	static readonly SectionHeader = styled.div`
+		display: flex;
+		justify-content: center;
+		width: 100%;
+		flex-direction: column;
+		row-gap: 10%;
+		height: 80%;
+		align-self: center;
+
+		& > .button-container {
+			width: 100%;
+			display: flex;
+			column-gap: 10%;
+			justify-content: center;
+		}
+	`
 }