과제를 하면서 css 수정하면서 구글링 해봐도 해결이 안되는 부분이 있어 질문드립니다! export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `수정하기/ 취소하기 버튼 CSS입니다. 이렇게 작성했을 때..이렇게 나옵니다. 분명 border: none; 을 작성해줬는데 적용이 안됩니다.이상해서 CSS 속성 하나씩 지워줬을 때,export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; // background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `이런식으로 background-color(또는background 속성)를 주석으로 처리하니 아래 사진처럼 테두리 선이 사라졌습니다.background 속성을 줬을 때 border: none 도 안먹히고 cursor: pointer; 속성도 안먹히던데 뭐가 문제인걸까요..ㅜㅜ

한 개의 item에 height와width를 설정 상태에서 margin/padding/border등을 주면, item크기가 어떻게 변하나요?   예를 들어 #item1의 크기를 height/width를 300px, 300px로 설정하고 padding을 30px로 준다고 하면, 330px, 330px이 되는 건가요? 아니면 300px, 300px은 변하지 않고 안에 padding이 생기는 건가요?   마찬가지로 border, margin을 30px씩 준다면 item1의 크기가 어떻게 변하는지 궁금합니다.    

  1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다.       2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요? 다시 검토해보아도 잘못된 부분을 못찾겠습니다