I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's my code:
footer div #selectft {
position: relative;
display: block;
padding: 12px 26px;
background: transparent;
color: #999;
border: 1px solid #333;
margin: 25px 0;
column-gap: 50px;
border-left: 140px;
}
footer p,
div nav {
margin-left: 140px;
display: inline-grid;
column-gap: 50px;
width: 15%;
justify-items: start;
}
footer a {
color: #737373;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer p {
margin-bottom: 25px;
}
footer nav ul {
list-style: none;
margin: 0;
padding: 0;
}
footer nav ul li {
margin-bottom: 16px;
font-size: 13px;
}
footer .bottom-text {
color: #737373;
}<footer>
<p>Questions? Contact us.</p>
<div>
<nav>
<ul>
<li><a href="">FAQ</a></li>
<li><a href="">Account</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Speed Test</a></li>
</ul>
</nav>
<select id="selectft">
<option value="english">English</option>
<option value="serbian">Serbian</option>
</select>
<p>Netflix Montenegro</p>
</div>
</footer>One thing to note: there are four <nav> elements in the footer, I removed 3 to keep the post clean.
Thanks
I expected the select element to align under the nav elements, but it seems to be stuck at the left edge and won't budge no matter what CSS tags I try.