When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page.
Below is the HTML code snippet:
<body id="about">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#" class="selected">About</a>
<a href="contact.html">Contact</a>
</div>
<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>
And here is the corresponding CSS style block:
@media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
The question arises: What could be causing the row div to overlap the myTopnav div?