반응 형 CSS의 경우 DIV에서 정렬되지 않은 목록이 필요합니까?

Question

반응 형 디자인을 작업하면서 정렬되지 않은 목록을 제외하고 모든 것이 반응적임을 확인했습니다. 브라우저의 크기를 조정하면 목록이 이동하거나 DIV의 가운데에 머물러 있지 않습니다. 나는 하루 종일 여러 가지 시도를 해봤지만 단순히 알아 내지 못합니다. 컨텍스트의 경우 #sitecontent는 모든 것을 담는 컨테이너이며 #sitecontent .leftsidebar에는 이미지와 순서가없는 목록이 있으며 #sitecontent .leftsidebar ul은 순서가 지정되지 않은 목록입니다. 누군가 그것을 확인하고 무엇이 잘못되었는지 말해 줄 수 있습니까?

@-moz-document url-prefix() { 
* { font-weight: 400; } 
h1, h2 
} 

@font-face { font-family: 'helvetica neue'; src: local('Arial'); } 

x:-o-prefocus, h1 { 
padding-top: 22px; 
} 

x:-o-prefocus, h2 { 
margin-top: -2%; 
} 

x:-o-prefocus, ul li { 
line-height: 20px; 
} 


#sitecontent { 
display: block; 
width: 90%; /* 780px */ 
max-width: 780px; 
padding-top: 150px; 
margin: 0 auto; 
} 

#sitecontent .leftsidebar { 
float: left; 
width: 19.2%; /* 150px */ 
} 

#profilepic { 
-moz-border-radius: 20px; 
border-radius: 20px; 
max-width: 100%; 
} 
#sitecontent .leftsidebar ul { 
position: relative; 
top:-5px; 
list-style-type: none; 
font-family: 'Patua One', cursive; 

} 

#sitecontent a { 
text-decoration: none; 
color: #3f83ca; 
} 

#sitecontent .leftsidebar ul li{ 
display:inline; 
margin-bottom: 3%; 
float: left; 
clear: both; 
border-bottom: 1px solid #E5E5E5; 
font-family: helvetica; 
} 

#sitecontent .leftsidebar ul li:hover { 
border-bottom: 1px solid #3f83ca; 
} 



#sitecontent .rightsidebar { 
float: right; 
width: 76.9%; 

} 

#sitecontent .rightsidebar > h1 { 
font-size:3.750em; 
font-weight: normal; 
color: #3f83ca; 
line-height: 0; 
font-family: helvetica; 
font-weight:bold; 

} 

#sitecontent .rightsidebar > h2 { 
line-height: 10px; 
font-weight: normal; 
color: #38414f; 
font-family: helvetica; 
font-weight: bold; 

} 

#sitecontent .rightsidebar > p { 
text-align: justify; 
padding-top: 16px; 
line-height: 20px; 
font-size: 0.938em; 
font-family:'Helvetica Neue', Arial, sans-serif; 


} 

#secondparagraph { 
text-align: justify; 
color: #A1A1A1; 
font-family:'Helvetica Neue', Arial, sans-serif; 


} 

#secondparagraph:hover { 
color:#3f83ca; 
opacity: 1.0; 

} 

#secondparagraph a { 
font-size: 14px; 
text-decoration: none; 
color: inherit; 
} 

@media screen and (max-width: 480px) { 


#sitecontent { 
width: 100%; 
padding-top: 10px; 
} 

#sitecontent .leftsidebar { 
width: 100%; 
float: none; 
} 

#profilepic { 
display:block; 
margin: 0 auto; 
border-radius: 77px; 
float:none; 
} 

#sitecontent .leftsidebar ul { 
position: relative; 
top:35px; 
} 



#sitecontent .leftsidebar ul li{ 
margin-bottom: none; 
border-bottom: none; 
float: none; 
clear: none; 
padding:10px; 
border-radius: 2px; 
background-color:#3f83ca; 
border: 1px solid #00688B; 
font-family: helvetica; 
font-weight: 400; 
} 

#sitecontent a { 
text-decoration: none; 
color: #EDEDED; 
} 

#sitecontent .leftsidebar ul li:hover { 
border-bottom: none; 
} 

#sitecontent .rightsidebar { 
float: none; 
margin: 0 auto; 
width: 90%; 

} 

#sitecontent .rightsidebar > h1 { 
position: relative; 
bottom: 36px; 
text-align: center; 
font-size:1.875em; 
font-weight: 600; 
color: #3f83ca; 
margin-top: 6%; 
font-family: helvetica; 
font-weight:bold; 

} 

#sitecontent .rightsidebar > h2 { 
display:none; 

} 

#secondparagraph { 
display: none; 

} 

#sitecontent .rightsidebar > p > a:first-child { 
color:#3f83ca; 
} 

} 

Answer 1

사이트가 최소화되어 있고 가장 작을 때 중심 맞춤 문제 만 보았습니다.

나는 text-align:center;을 추가했습니다.

#sitecontent .leftsidebar { 
    width: 100%; 
    float: none; 
    text-align: center; 
}