Removing space between 2 floating elements

Question

how can I remove the space between 2 floating elements except negative margin? I´ve put the code also on jfidle because here you can´t move the window so it is distorted. https://jsfiddle.net/60cfz3wy/

 .pozadi{ border-top-right-radius: 50px; background: #D8E7ED; height: 100%; float: right; width: 70%; } #primary_nav_wrap{ float: left; margin: 0; z-index: 1; } #primary_nav_wrap ul { list-style:none; padding:0; margin-top:0; } #primary_nav_wrap ul a { display:block; font-size:20px; font-weight: 600; } #primary_nav_wrap ul li { font-size: 20px; position:relative; font-weight: 600; border-bottom: 1px solid white; } #primary_nav_wrap ul ul { display:none; position:absolute; top: 0%; left: 100%; background: #7ea7b1; border-bottom-right-radius: 15px; } #primary_nav_wrap ul ul li { text-align: left; width: 150px; padding: 10px 20px 10px 20px; } } #primary_nav_wrap ul ul li:hover{ background: white; } #primary_nav_wrap ul ul a { line-height:120%; } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } .tlacitka { background-color: lightblue; padding: 10px 20px 10px 20px; } .tlacitka:hover { background: white; color: black; text-decoration: none; } 

 <nav id="primary_nav_wrap"> <ul> <a href="index.html"><li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li></a> <a href="prodej.html"><li class="tlacitka">Prodej kompresorů</a> <ul> <a href="#"><li>kompresory CompAir</li></a> <a href="#"><li>Kompresory Gardner Denver</li></a> <a href="#"><li>foto + ostatní</li></a> </ul> </li> <a href="opravy.html"><li class="tlacitka">Opravy kompresorů</a> <ul> <a href="#"><li>GO kompresorů</li></a> <a href="#"><li>Go turbokopresorů</li></a> <a href="#"><li>Repase šroubových bloků</li></a> <a href="#"><li>Repase dmychadel a vývěv</li></a> <a href="#"><li>Foto + ostatní</li></a> </ul> </li> <a href="kontakt.php"><li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li></a> </ul> </nav> <div class="pozadi"> <div class="l"> <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas, ante et imperdiet iaculis, ligula diam suscipit ante, vel mattis est arcu sit amet arcu. Nullam tincidunt, nulla id gravida consequat, mi mi mattis libero, eget lobortis justo justo at orci. Sed pulvinar interdum mauris dignissim gravida. Aliquam erat volutpat. Integer varius, lorem vestibulum congue feugiat, magna orci mollis sapien, nec semper erat neque eget urna. Maecenas elementum tellus in dolor tristique porttitor. Nullam quis quam diam. Proin tempus pretium ante, ut lacinia tellus efficitur ac. Hi i am bla bal short text feugiat pellentesque quam id ultrices. Nulla tincidunt auctor felis ac pellentesque. </p> </div> <div class="p"> <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas, ante et imperdiet iaculis, ligula diam suscipit ante, vel mattis est arcu sit amet arcu. Nullam tincidunt, nulla id gravida consequat, mi mi mattis libero, eget lobortis justo justo at orci. Sed pulvinar interdum mauris dignissim gravida. Aliquam erat volutpat. Integer varius, lorem vestibulum congue feugiat, magna orci mollis sapien, nec semper erat neque eget urna. Maecenas elementum tellus in dolor tristique porttitor. Nullam quis quam diam. Proin tempus pretium ante, ut lacinia tellus efficitur ac. Pellentesque feugiat pellentesque quam id ultrices. Nulla tincidunt auctor felis ac pellentesque. </p> </div> </div> 

I doing it by floating because when I had only nav floated the background color affected the nav too even though it is attributed to div which is below.

Does anyone know how to solve this? Thanks for answers.

Answer 1

You can try display: inline-block instead floats, it does well too.

Speaking about your problem, try to make #primary_nav_wrap ul { margin: 0;} As 'ul' has default margins, you have the spaces here