Select element inside div stuck

May 5, 2023

This thing is driving me nuts and I can’t manage to solve it.
I was making Netflix-like page for practice, and in footer, select element which contains languages is pinned and won’t move anywhere.
This is 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 note: There is four <nav> elements in footer, I just removed 3 of them so I don’t junk post with unnecessary code 🙂
Thanks

I was expecting element to align under nav elements, but it just looks like it’s pinned at the left edge and won’t move.
I have tried different variations of every possible tag in css, but nothing helped

>Solution :

You probably meant to set margin-left instead of border-left

footer div #selectft {
    position: relative;
    display: block;
    padding: 12px 26px;
    background: transparent;
    color: #999;
    border: 1px solid #333;
    margin: 25px 0;
    column-gap: 50px;
    margin-left: 140px;
}