버튼 앞에 아이콘들 이미지를 각각 주기 !

• 하고 싶었던 것: 공통 요소인 li의 ::before요소로 아이콘을 넣어주고 싶었다. 공통 속성을 li에 넣고 각 자식들에게 이미지만 줄 수 있도록.
• 처음 방법

li::before {
content: ""
float: left;
width: ;
height: ; 

}  

• 결론 li에 가상요소를 주는게 아니라 li:nth-child::before로 공통속성을 주고 li:nth-child(1)::before 이런 식으로 각각의 요소들에게 background 이미지를 제공.
  공통으로 background img에 대한 속성을 주고
  li:nth-child(n)::before {
  background: url("") no-repeat;
  }
  으로 수정 가능

문제 2

이 아이콘들 위치가 늘어나면 해당 아이콘들이 벗어남
1. 너비가 늘어났을 떄 아이콘이 위치를 벗어난다.

position: absolute;
  left: 7rem;

2. 너비가 늘어나도 위치 벗어나지 않음. + 텍스트 중앙으로 맞춰주기

float: left;
그리고 텍스트를 감싼 버튼에
margin-right: 8%;

3. 스크롤 발생 -> 어떻게 없애는지?

발생이유 :

margin-bottom 과 box-sizing: border-box를 주고 있었다.

해결

padding-bottom과 box-sizing: border-box로 해결