liとp horzontalのアライメント

Question

私が今直面している問題の1つは、水平に親の中心にある内部divを持つフレックスボックス（無関係であるべき）があることです。私は、並べ替えられていないリストを内側のdivのテキストと水平に整列させたいが、text-align：centerを使用していても、（右に）数ピクセルずれているように見えます。私は今までこの問題に遭遇したことはないと信じています）。 '.right' divは実際には別の要素の子ですが、それは無関係なはずなので、実際に必要な部分を投稿します。これはulの最初のスタイルの単なる製品ですか？

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 
    
 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 1

ブラウザのデフォルトのスタイルを上書きするためにあなたの<ul>にpadding: 0を追加します。

Answer 2

<ul>には、ブラウザのデフォルトのスタイルシートからのデフォルトの埋め込みがあります。

padding-left: 0;を使用して、そのパディングを無効にすることができます。

ul{ 
    list-style: none; 
    padding-left: 0; 
} 

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 

 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>