Issue acmuta#50

Changed line 10 on page.tsx in the officers folder to default to text center for the first paragraph and on large screens to text-left for the header and same thing on line 11 for the paragraph.

 Changed line 25 on Department.tsx on the officers folder. Added a default left margin for 5rem and added a conditional for large screens to have a left margin of 0.

Changed People.tsx to fix margins as well. Changed line 22 on the page to have a default left margin of 3.75rem and on large screens to have a left margin of 0.

src/app/officers/page.tsx

@@ -7,8 +7,8 @@ export default function Officers() {
   return (
     <div className="relative overflow-hidden">
       <header className="text-start mb-28 m-8 lg:m-20 lg:ml-40">
-        <h1 className="text-4xl lg:text-5xl font-bold mb-4">meet the team</h1>
-        <p className="text-lg lg:text-xl text-gray-200">
+        <h1 className="text-4xl lg:text-5xl font-bold mb-4 text-center lg:text-left">meet the team</h1>
+        <p className="text-lg lg:text-xl text-gray-200 text-center lg:text-left">
           get to know the amazing people behind our work!
         </p>
       </header>

src/components/officers/Department.tsx

@@ -22,7 +22,7 @@ interface DepartmentProps {
 const Department: React.FC<DepartmentProps> = ({ name, logoUrl, people }) => {
   return (
     <section className="items-center mb-12">
-      <div className="flex items-center space-x-4 mb-6">
+      <div className="flex items-center space-x-4 mb-6 ml-20 lg:ml-0">
         <Image
           src={logoUrl}
           alt={`${name} logo`}

src/components/officers/People.tsx

@@ -19,7 +19,7 @@ interface PeopleProps {
 
   const People: React.FC<PeopleProps> = ({ name, role, imageUrl, socialLinks }) => {
   return (
-    <div className="flex items-center space-x-4 py-4">
+    <div className="flex items-center space-x-4 py-4 ml-15 lg:ml-0">
       <div className="flex-shrink-0">
         <Image 
           src={imageUrl} 
@@ -33,7 +33,7 @@ interface PeopleProps {
       <div className='flex-grow'>
         <h2 className="text-lg lg:text-xl font-semibold">{name}</h2>
         <h4 className="text-sm mb-2 text-green-100">{role}</h4>
-        <div className="flex space-x-4">
+        <div className="flex space-x-4 ">
           {socialLinks?.linkedin && (
             <a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" className="text-white hover:text-blue-300 text-lg">
               <BsLinkedin />