fixing width of newsletter-social.js and hours.js component

packages/mvmuseum-theme/src/components/home/hours.js

@@ -49,6 +49,7 @@ const PropertyRow = styled(Container)`
   padding: 3rem 1rem;
   display: flex;
   justify-content: center;
+  width: 100%;
 
   ${(props) => props.theme.breakPoints.md} {
     flex-direction: column;

packages/mvmuseum-theme/src/components/partials/newsletter-socialmedia.js

@@ -18,7 +18,7 @@ const NewsletterSocialMedia = ({ state }) => {
       <NewsletterForm theme={state.theme}>
         <h2>Sign up for our newsletter</h2>
 
-        <StyledForm>
+        <StyledForm theme={state.theme}>
           <Container>
             <input placeholder="enter your email" />
             <button type="submit">
@@ -50,8 +50,7 @@ const NewsletterSocialMedia = ({ state }) => {
 export default connect(NewsletterSocialMedia);
 
 const NewsletterSocialMediaContainer = styled.div`
-  width: 100vw;
-  display: grid;
+  width: 100%;
   ${"" /* grid-template-rows: repeat(3, 1fr); */}
   position: relative;
   z-index: 100;
@@ -113,6 +112,10 @@ const StyledForm = styled.form`
     cursor: pointer;
     background: none;
   }
+
+  ${(props) => props.theme.breakPoints.md} {
+    width: 50%;
+  }
 `;
 
 const SocialMedia = styled.div`