I am currently working on resolving a margin collapse issue. I am puzzled by the overlapping paragraphs and I really need to understand why this problem is happening. I suspect it may be a collapsing margin issue.
Please take a look below:
https://i.stack.imgur.com/eNNRL.png
This is the HTML code snippet:
<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>
This is my CSS code:
.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;
}
If you have any ideas or suggestions, please feel free to share them!