リストをテキストの中央に配置する方法は？

Question

私はw3schoolsの4桁のフッターに触発されたウェブサイトのフッターを作成しようとしていますが、liタグのテキストは見出しと比べて少し右に移動します。

CSS：

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0 0 100px; 
} 

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

#footer { 
    width: 100%; 
    margin: auto; 
} 

.footerFloat { 
    width: 100%; 
} 

@media all and (min-width: 950px) { 
    #footer { 
    width: 980px; 
    margin: auto; 
    } 
    .footerFloat { 
    width: 25%; 
    float: left; 
    display: block; 
    } 
} 

#wrapper { 
    width: 100%; 
    overflow: hidden; 
} 

ul { 
    list-style: none; 
} 

.center { 
    text-align: center; 
} 

HTML：ここ

<header></header> 
<footer> 
    <div id="wrapper"> 
    <div id="footer"> 
     <div class="footerFloat"> 
     <h4 class="center">Header 1</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 4</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 3</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
     <div class="footerFloat"> 
     <h4 class="center">Header 4</h4> 
     <ul> 
      <li class="center">Line 1</li> 
      <li class="center">Line 2</li> 
      <li class="center">Line 3</li> 
      <li class="center">Line 4</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</footer> 

が問題のpictureです。

私はこれをどのように修正でき、フッターの見出しにテキストの中心を置くことができますか？

ご協力いただきありがとうございます。

は、デフォルトではulに内蔵されているパディングを削除

Answer 1

を-ItzJavaCraft。

 
     .footerFloat { 
 
     width: 25%; 
 
     float: left; 
 
     } 
 
     #wrapper { 
 
     width: 100%; 
 
     overflow: hidden; 
 
     } 
 
     ul { 
 
     list-style: none; 
 
     padding: 0; /* here---add this */ 
 
     } 
 
     .center { 
 
     text-align: center; 
 
     }

<footer> 
 
    <div id="wrapper"> 
 
    <div id="footer"> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 1</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 4</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 3</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="footerFloat"> 
 
     <h4 class="center">Header 4</h4> 
 
     <ul> 
 
      <li class="center">Line 1</li> 
 
      <li class="center">Line 2</li> 
 
      <li class="center">Line 3</li> 
 
      <li class="center">Line 4</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer>