안녕하세요. 현재 리액트를 조금씩 공부해 나가면서 sns 페이지 제작을 하려 합니다

그런데 문제가 생겼습니다.


글 내용이 조금 길더라도 넓은 마음으로 양해 부탁드립니다.


자기소개, 좋아요, 내가쓴글, 정보수정 이 요소들이 브라우저 크기에 따라 변하지 않고 고정됩니다..


그리고

다른 항목을 누르면 저렇게 나옵니다... 아무리 검색을 하고 똥꼬쇼를 해봐도 결과는 똑같아서 미치겠습니다 ㅠㅠ


이하는 해당 개체들 소스코드 입니다..

import React, { Component } from 'react'; import styled from 'styled-components'; import {Link, Route} from 'react-router-dom'; import {About, Like, MyBoards, MyPage} from "../Router"; class Navigation extends Component { render() { return ( <div> <Nav> <NavList> <NavItem><Link to='/About' >자기소개</Link></NavItem> <NavItem><Link to='/Like' >좋아요</Link></NavItem> <NavItem><Link to='/MyBoards' >내가쓴글</Link></NavItem> <NavItem><Link to='/MyPage' >정보수정</Link></NavItem> </NavList> </Nav> <Route path="/About" component={About} /> <Route path="/Like" component={Like} /> <Route path="/MyBoards" component={MyBoards} /> <Route path="/MyPage" component={MyPage} /> </div> ); } } export default Navigation; const Nav = styled.div` width: flex; height: 30px; margin: flex; margin-bottom : auto; border-bottom: 2px solid #d1d8e4; display: inline; ` const NavList = styled.ul` width: flex; display: flex; margin-top: 1cm; margin: 0 auto; justify-content: space-around; flex:1; absolute; ` const NavItem = styled.li` float: left; width: flex; margin-left: flex; margin-top: 5px; display: flex; `


고수님들의 답변 간절히 기다리고 있겠습니다