add header style

@@ -3,22 +3,42 @@ import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 
+const Header = styled.header`
+  display: block;
+`;
+
+const Nav = styled.nav`
+  height: 70px;
+  width: 100%;
+  position: fixed;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+`;
+
 const HeaderBox = styled.div`
+  height: 100%;
+  width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
+  margin: 0 auto;
 `;
 
 const HeaderTitleBox = styled.div`
   display: flex;
+  height: 100%;
+  align-items: center;
+  svg {
+    font-size: 1.5rem;
+  }
 `;
 
 const HeaderTitle = styled.span`
-  font-size: 15px;
+  font-size: 1.5rem;
 `;
 
-const HeaderMenuBox = styled.div`
+const HeaderMenuNav = styled.nav`
   display: flex;
+  justify-content: flex-start;
 `;
 
 const HeaderMenuList = styled.ul`
@@ -26,7 +46,9 @@ const HeaderMenuList = styled.ul`
 `;
 
 const HeaderMenuItem = styled.li`
+  &::before {
     content: ${(props) => props.text};
+  }
 `;
 
 const StartBox = styled.div`
@@ -37,19 +59,21 @@ const StartBox = styled.div`
 
 export default () => {
   return (
+    <Header>
+      <Nav>
         <HeaderBox>
           <HeaderTitleBox>
-        <FontAwesomeIcon>
-          <faComments />
-        </FontAwesomeIcon>
+            <FontAwesomeIcon icon={faComments} />
             <HeaderTitle>KhuChat</HeaderTitle>
           </HeaderTitleBox>
-      <HeaderMenuBox>
+          <HeaderMenuNav>
             <HeaderMenuList>
-          <HeaderMenuItem text={"About This"} />
+              <HeaderMenuItem>About This</HeaderMenuItem>
             </HeaderMenuList>
-      </HeaderMenuBox>
             <StartBox>Start</StartBox>
+          </HeaderMenuNav>
         </HeaderBox>
+      </Nav>
+    </Header>
   );
 };