My issue is best represented through a gif. Here is the problem:
https://i.sstatic.net/UdfjT.jpg
When viewing on smaller screens, the content should wrap properly but instead, I encounter a horizontal scrollbar.
For reference, here is a codepen link.
You can also view the actual code below as required by StackOverflow guidelines:
HTML
<div class="l-grid">
<header>
<h1 class="logo"><span class="logo__brand-color">M</span>y Site</h1>
</header>
/* HTML CODE OMITTED FOR BREVITY */
CSS
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
border: none;
box-sizing: border-box;
}
/* CSS STYLES OMITTED FOR BREVITY */
I have checked for padding or margin issues using developer tools, but couldn't find any. Any suggestions would be greatly appreciated!