Encountering a small dilemma with media queries within my HTML. One of the sections in my code contains the following:
<div class="header-left">
</div>
<div class="header-center">
<ul>
<li class="end"><a href="#">ETc</a></li>
<li><a href="#">Etc</a></li>
<li><a href="#">Etc</a></li>
<li><a href="#">Etc</a></li>
</ul>
</div>
<div class="header-right">
</div>
This section is the header of my website, split into 3 parts: left, center, and right. Left and right are just placeholder elements to keep the center aligned in the middle. When I apply media queries for lower screen widths, I want the left and right sections to disappear. For this purpose, I used:
@media(max-width:600px){
.header-left{display:none;}
.header-right{display:none;}
}In terms of CSS properties, I use max-width as well as percentages to ensure they are positioned correctly. Everything seems to work fine for the elements on the left side, specifically with .header-left. However, the .header-right does not vanish when resized. Is there a way to rectify this issue or am I executing it incorrectly in this scenario?