Using the bootstrap grid system, I am facing some uncertainties.
I would like to create a header where there is a logo on the left and links on the right. Below this header, I want a menu that spans the same width as the content above.
In my current setup: https://jsfiddle.net/v529b4mz/1/, everything seems to be working fine. However, there are two issues:
- When the screen size is 1920px, there are white margins around the content which decrease as the screen is resized. At a certain point, the media queries change causing more white space around the elements again. I'd like to reduce the space when the media queries change so the content can expand accordingly.
Is there a way to achieve this?
For instance, how can I set a green background for the menu in all media queries except for extra small screens where I want to hide it and display a mobile-friendly version without drastically reducing the font size or padding of list items? Instead, utilizing the surrounding white space to ensure legibility up to the small media query breakpoint.
Also, why are there margins between the list elements?
Note: The header and section elements are used to provide a full-width background color for 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><a href="">Item1</a></li>
<li><a href="">Item2</a></li>
<li><a href="">Item3</a></li>
<li><a href="">Item4</a></li>
<li><a href="">Item5</a></li>
<li><a href="">Item6</a></li>
<li><a href="">Item7</a></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;
}