Decreasing the White Space Once the Media Query Changes - css

Question

Im using bootstrap grid but Im with some doubts.
I want to have a header where i have a logo at left some links at right. And below this header I want to have a menu that occupies the same with of the content above.
I have this in this example: https://jsfiddle.net/v529b4mz/1/, and it is working. But there are 2 issues:
For example if the size of the screen is 1920px I have some white margins around content and if the screen is resized the space around decreases and there is some point that the media querie changes and when the media querie change there are again more white space around, but i Would like to not have too much space. So, I would like to have less space around when the media queries change so the content can occupy more space.
Do you know how to do this?
For example if I want to have this menu with background-color green in this example: https://jsfiddle.net/v529b4mz/1/ in all media queries except for the extra small media query where I want to hide this menu and show a mobile one. How to do that in a way that its not necessary decrease too much the font size or the padding of the list items, or both but instead utilize the white space around so the list items appear legible up to the small media query?
And, there are some margins between the list elements, do you know why?
Note: The header and section elements are just to give a full width background color to the bootstrap containers.
HTML:
<header style=background:yellow;>
<div class="container">
<div class="row">
<div class="col-2" style="background-color: orange">
Logo
</div>
<div class="col-10 d-flex justify-content-end" style="background-color: pink; ">
Links
</div>
</div>
</div>
</header>
<section style="background:pink;">
<div class="container">
<div class="row" style="background-color: green">
<div class="col-12">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
</section>
CSS:
*{
box-sizing:border-box;
}
ul{
display: flex;
align-items: center;
list-style:none;
justify-content:space-between;
}
ul li{
padding:20px;
border:1px solid gray;
}

Answer 1

You're using .container which creates a fixed width grid between 2 given breakpoints.
You can replace it by .container-fluid which is... well fluid :)
Note that you'll have to set manually some padding on the section parent: can be a fixed padding in rem, em or px or proportional to the width of the viewport with vw unit (100vw = the width of the viewport) or a mix of them depending of the resolution.
Relevant documentation (Bootstrap 4.0 as seen in your fiddle)
Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.
Updated Fiddle
<section style="background:pink;">
<div class="container-fuild">
<div class="row" style="background-color: green">
<div class="col-12">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
</div>
</div>
</section>