Responsive navigation bar with uikit css framework

Question

This code is written for navbar using UIkit css framework. When switching to desktop mode from responsive mode an extra space appears between navbar and the content section. Furthermore I've noticed that keeping nav menu items of one word only would remove those extra blank space.

What would be the best possible method to remove the extra blank space between navbar and content.

Js fiddle Link

 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/> <div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset"> <div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper"> <nav class="uk-navbar-container" uk-navbar id="navbar"> <div class="uk-navbar-left"> <a class="uk-navbar-toggle uk-hidden@l" href="#" uk-toggle="target: #offcanvas-nav"> <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span> </a> <a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="/">item1</a></li> <li><a href="/about">item2</a></li> <li><a href="/about">item3</a></li> <li><a href="/about">item4</a></li> <li><a href="/about">item5</a></li> <li><a href="/about">item6</a></li> <li><a href="/about">item7</a></li> <li><a href="/about">item8</a></li> </ul> </div> </nav> </div> </div> <div class="uk-offcanvas-content"> <div id="offcanvas-nav" uk-offcanvas="overlay: true"> <div class="uk-offcanvas-bar"> <ul class="uk-nav uk-nav-default"> <li class="uk-active"><a href="/">item1</a></li> <li><a href="/about">item2</a></li> <li><a href="/about">item3</a></li> <li><a href="/about">item4</a></li> <li><a href="/about">item5</a></li> <li><a href="/about">item6</a></li> <li><a href="/about">item7</a></li> <li><a href="/about">item8</a></li> </ul> </div> </div> </div> <section class="uk-container-expand"> <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-center uk-flex-middle " data-src="https://source.unsplash.com/1200x800/?camera" uk-img> <h2>Background image</h2> </div> </section> <section class="uk-container"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet recusandae ex accusantium quaerat, dolore ducimus inventore fugiat perspiciatis iusto ut quidem? Quod eaque libero cumque dolor quidem nam ipsa a. Facere minima id odit aspernatur laboriosam, impedit repellat a nam, atque molestias ut? Culpa delectus et labore aliquid corporis animi ad, voluptatibus rerum in molestiae quo pariatur quos consectetur fugiat debitis accusantium iste iure quidem obcaecati provident qui similique sapiente cum. Suscipit aliquam labore dignissimos, quas corrupti laboriosam deserunt quaerat molestias assumenda magnam, est ullam nemo non quasi odio id fugit ab consectetur praesentium tempore reiciendis dolorum. Voluptatibus quisquam est sed? Facere culpa asperiores aperiam officia, totam fugiat optio! Hic explicabo fuga ab molestias, blanditiis labore expedita dolore optio voluptas corrupti reprehenderit soluta incidunt odio dolorum ullam, illum quae saepe laudantium, minus rerum similique debitis velit. Exercitationem sit incidunt quia repellendus. Culpa esse ducimus aliquid nemo, nihil excepturi corrupti odio eum officiis temporibus molestiae laborum velit doloribus asperiores autem. Eos commodi neque illo repellendus nesciunt voluptates, velit, repellat eligendi et temporibus odit autem numquam reprehenderit alias cumque modi, aliquam vitae a! Pariatur, provident quod, nihil ipsa eos quam nemo accusantium perspiciatis vero fugit iusto perferendis obcaecati, sequi ad ullam totam?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam modi explicabo repudiandae iste adipisci incidunt quis, quasi labore officiis atque praesentium esse dolorem vero rerum eos sequi aliquid, tenetur quas ipsum. At inventore sed unde sint qui vero nostrum ipsum reprehenderit porro, maiores, sequi eum hic, assumenda laudantium magnam possimus expedita eaque quisquam suscipit? Corrupti, laborum quibusdam sapiente natus nobis aliquam repellat, animi ex nulla ratione doloremque praesentium sint minus rem asperiores? Alias rem possimus iure natus pariatur suscipit reiciendis culpa nisi veniam, ipsum repellat, ipsa impedit veritatis rerum amet voluptatem iste, adipisci quo perferendis neque. Obcaecati nam beatae saepe non ex inventore sequi! Provident ad sint repudiandae quis adipisci earum. Facilis optio voluptatibus quam deserunt fugit aliquam culpa labore voluptatem ullam maiores dolorem commodi repellat architecto iste, autem omnis nihil sint sit blanditiis quidem esse! Itaque tempora obcaecati architecto placeat in ea illo earum reprehenderit nemo, voluptas aliquid fuga facere. Harum sit et numquam explicabo, quo similique provident doloremque vero nemo quos molestiae velit ullam est unde tempore ratione optio minus quod tempora facere, dolorem tenetur obcaecati iste ipsum. Fuga fugiat, corrupti doloremque fugit, debitis reprehenderit dicta a veniam enim ut cumque rem? Qui officia quaerat debitis consequuntur, sequi sapiente odit necessitatibus. Delectus autem, repellendus dolorum, maxime placeat modi, error laboriosam doloremque odio vitae consectetur quam doloribus magni quaerat sapiente maiores? Recusandae esse minus, accusantium aut sunt rem veniam sit, expedita quia optio ad quod ea? Maxime, consectetur eos quos fugiat, ducimus aliquid reiciendis corporis delectus nisi illo quibusdam laboriosam architecto doloremque necessitatibus officia sed et dolores totam nam similique asperiores esse dolore vel! Ullam esse repudiandae cum a voluptatem! Eum cumque aut error soluta odio ea in sit obcaecati nulla, dignissimos eos hic autem! Et deleniti consequuntur perspiciatis provident id temporibus ducimus quibusdam adipisci, numquam ab. Repellat quidem tempore eveniet distinctio omnis quibusdam sint, minus illo architecto! Quos nihil illum quisquam, assumenda consectetur eius numquam distinctio voluptate, cupiditate, in optio accusamus! Soluta esse tempore repellat delectus doloribus pariatur quis cumque, dolor aliquam sit modi similique neque ad consectetur eum impedit cum distinctio laboriosam libero asperiores adipisci! Quo, velit. Dignissimos officia vel doloribus laborum saepe molestiae odio perferendis itaque voluptatibus sapiente repudiandae, animi distinctio illum possimus sequi dolorem molestias ratione mollitia quam ipsa fuga facere non tenetur sint! Eum quod beatae dicta sint dolorem soluta modi distinctio? Autem eaque eius sapiente odit ex deserunt. Magnam quaerat modi tenetur sed!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo est id, facilis nesciunt facere ducimus praesentium. Eos, et error excepturi est illo ratione reiciendis tenetur ea nobis doloribus sunt temporibus placeat fuga perspiciatis voluptas, minus, deserunt officia? Iusto laboriosam quos rem, velit quam neque maxime dolorum ullam sapiente laudantium ipsum fugit tempore, ab illo, nesciunt veritatis aspernatur. Voluptates maxime, esse ipsam libero exercitationem odit! Tenetur reprehenderit ex adipisci esse! Ad natus fugiat rem tempora dignissimos vel animi nisi, eos libero. Beatae dolore, architecto quo veniam obcaecati quia reiciendis adipisci, enim repellendus eum quis voluptatem modi. Provident voluptate aliquid expedita dolorum quibusdam, mollitia quo magni? Dicta, provident reprehenderit. Delectus qui, debitis iure voluptas dicta tempora at laudantium eaque fugiat repellat reiciendis dignissimos. Sit reiciendis ducimus corporis quis quo quod aperiam explicabo laborum dignissimos error totam beatae est ipsa, maxime repellat a amet, animi esse ex dolorum? Tempora magnam nemo cupiditate, consectetur adipisci non blanditiis laudantium beatae esse, obcaecati aspernatur ex, quidem dolor voluptatem! Quasi maiores, placeat commodi ipsam laboriosam esse aspernatur ex eaque saepe porro possimus animi consequatur. Ex dicta dolorem aut! Veniam non dolorem, quas delectus totam ex sit maiores, mollitia dicta rem obcaecati ratione repellat quae quod facere consequuntur?</p> </section> 

Answer 1

The extra space should be a icon or a logo it is visible on all resolutions. I think the extra space actually appears because the desktop menu is shown at responsive resolutions instead of getting removed and then the "hamburger" menu is and should be in use.

Answer 2

Just remove uk-container from navbar's container to getting rid of extra spaces.

Caused by : uk-container (adds padding) + uk-width-expand = padding + 100% width.

Live: http://jsfiddle.net/bgul/57zskhwp/