Collapsing margin issue

Question

Ich versuche das Problem mit dem Randzusammenbruch zu lösen. Ich verstehe nicht, warum Absatz überlappen. Ich möchte wirklich wissen, warum dieses Problem auftritt. Ich denke, es ist wie Collapsing Margin-Problem.

bitte auf Schlag und anschauen

dies mein html ist

<div class="menu_list open"> 
     <ul> 
     <li><a href="#/" class="router-link-active">Home</a></li> 
     <li><a href="#/Story" >Story</a></li> 
     <li><a href="#/Brands" >Brands</a></li> 
     <li><a href="#/news" >News</a></li> 
     <li><a href="#/contact" >Contact</a></li> 
     </ul> 
    </div> 
    <div class="company_detail_container container" style="background: #c9bbbb;"> 
<main class="company_detail"> 

    <p > 
    The new legislation would also sharply limit President Donald Trump's ability to lift any sanctions against Russia. 
    He has previously said he needs diplomatic leeway with the Kremlin. 
    Mr Trump's time in office has been dogged by claims that Russia tried to influence last year's US election. 
    Moscow denies any wrongdoing but several US investigations are looking into whether anyone in the Trump campaign colluded with Russian officials.   </p> 

</main> 
</div> 

das ist mein css

.menu_list{ 
    width: 100%; 
    height: 200px; 
    top: 0; 
    left: 0; 
    opacity: 1; 
    position: relative; 
    padding: 10px; 
} 

.menu_list li{ 
     display: block; 
    list-style: none; 
    padding: 10px; 
    border-bottom: 1px solid black; 
    text-align: center; 
} 
p { 
    margin: 0 0 10px; 
} 

bitte geben Sie mir eine Idee

https://codepen.io/jeonghu/pen/KvKPPO?editors=1100

Answer 1

Der Grund ist einfach, dass Sie die Höhe .menu_list bei 200px fixiert. Entfernen Sie diese Einstellung (die height zu auto setzt) ​​und es überlappt sich nicht mehr

https://codepen.io/anon/pen/qXBWvK?editors=1100