Change styling

src/App.css

@@ -4,7 +4,7 @@ html {
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
-  background-color: #fce6cb;
+  background-color: #f8f8f8;
 }
 
 html {
@@ -12,19 +12,9 @@ html {
 }
 
 header {
-  border-bottom: 2px solid white;
-  margin-bottom: 1em;
-  display: flex;
-  align-items: center;
-  padding: 0px 10px;
-}
-
-header h1 {
-  flex: 1;
+  background-color: antiquewhite;
 }
 
 footer {
-  border-top: 2px solid white;
-  margin-top: 1em;
-  padding: 0 10px;
+  background-color: antiquewhite;
 }

src/App.js

@@ -7,19 +7,35 @@ import { SearchBar } from './components/SearchBar'
 import './App.css'
 import { LangSelect } from './components/LangSelect'
 
+import { Container } from './styles/Container'
+import { Flex, FlexMain } from './styles/Flex'
+
 export const App = () => {
   const { t } = useTranslation()
   return (
     <>
       <header>
-        <h1>{t('title')}</h1>
-        <SearchBar></SearchBar>
-        <LangSelect />
+        <Container>
+          <Flex alignItems="center" flexWrap="wrap">
+            <FlexMain>
+              <h1>{t('title')}</h1>
+            </FlexMain>
+            <SearchBar></SearchBar>
+            <LangSelect />
+          </Flex>
+        </Container>
       </header>
       <main>
-        <RsvpReader></RsvpReader>
+        <Container>
+          <h2>Widget</h2>
+          <RsvpReader></RsvpReader>
+          <h2>Text input</h2>
+          <h2>Options</h2>
+        </Container>
       </main>
-      <footer>Made by Alfred Melch</footer>
+      <footer>
+        <Container>Made by Alfred Melch</Container>
+      </footer>
     </>
   )
 }

src/styles/Container.css

@@ -0,0 +1,28 @@
+.container {
+  margin: 0 auto;
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  .container {
+    width: 80%;
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  .container {
+    width: 80%;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .container {
+    width: 70%;
+  }
+}

src/styles/Container.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import styles from './Container.css'
+
+export const Container = ({ children }) => {
+  return <div className={styles.container}>{children}</div>
+}

src/styles/Flex.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+}
+
+.mainItem {
+  flex: 1;
+}

src/styles/Flex.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styles from './Flex.css'
+
+export const Flex = ({ children, ...rest }) => {
+  return (
+    <div className={styles.container} style={rest}>
+      {children}
+    </div>
+  )
+}
+
+export const FlexMain = ({ children }) => {
+  return <div className={styles.mainItem}>{children}</div>
+}