Having a challenge with the layout of my website when viewed on mobile devices or in Chrome's developer mobile tools. The two divs at the top of the page are producing a thin white border, which is not visible in regular browser view.
Initially faced the issue with the divs containing Lorem Ipsum content when the body had a background color set. Upon research, found that adding a background color to the body triggers this problem. Removing the background color from the body resolved the white outlines on those divs but caused them to appear in the navbar instead.
Attempts to fix the issue by setting margins, padding, and borders to 0, as well as using outline:none, have been unsuccessful so far.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
.left_logo_nav {
display: flex;
width: 50%;
align-items: center;
height: 86px;
background-color: #0D6AE8;
}
.main-nav {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0D6AE8;
height: 86px;
width: 50%;
}
.box {
display: flex;
flex-wrap: wrap;
}
.gap {
display: flex;
align-items: flex-end;
width: 100%;
height: 975px;
background-color: #0D6AE8;
}<body>
<div class="box">
<div class="left_logo_nav">
<a href="index.html"><img class="top_logo" src="svg/franco_logo.svg" alt="Logo" /></a>
</div>
<nav class="main-nav">
<li class="no-bullet"><a class="nav-text" href="#about">About</a></li>
<li class="no-bullet"><a class="nav-text" href="portfolio.html">Portfolio</a></li>
<li class="no-bullet"><a class="nav-text" href="#">Climate</a></li>
<li class="no-bullet"><a class="nav-text" href="contact.html">Contact</a></li>
</nav>
</div>
<div class="gap"></div>
</body>