remove/change css attribute of first element inside form

Question

I'm struggling to remove or change an attribute of an element inside a form.

Here's my html:

   <div class="tab_nav_wrapper">
    <form method="#" action="#">
        <input name="task" type="hidden" value="task1" >
        <input class="tab_nav_button" type="submit" value="Button1" >
    </form>
    <form method="#" action="#">
        <input name="task" type="hidden" value="task2" >
        <input class="tab_nav_button" type="submit" value="Button2" >
    </form>
    <form method="#" action="#">
        <input name="task" type="hidden" value="task3" >
        <input class="tab_nav_button" type="submit" value="Button3" >
    </form>
</div>

<div class="tab_nav_wrapper">
    <form method="#" action="#">
        <input name="task" type="hidden" value="task1" >
        <input class="tab_nav_button" type="submit" value="Button1" >
    </form>
    <form method="#" action="#">
        <input name="task" type="hidden" value="task2" >
        <input class="tab_nav_button" type="submit" value="Button2" >
    </form>
    <form method="#" action="#">
        <input name="task" type="hidden" value="task3" >
        <input class="tab_nav_button" type="submit" value="Button3" >
    </form>
</div>

My css:

input[type=submit].tab_nav_button {
  min-width        : 72px;
  height           : 36px;
  margin-left      : 2px;
  color            : rgb(255, 255, 255);
  border           : none;
  background-color : blue;
  text-transform   : uppercase;
}

I want to remove the margin-left on every first input.tab_nav_button inside the wrapper(.tab_nav_wrapper)

I tried to use something like the first-child selector .. but no success. I don't wanna use a different class for the first element.

Thanks!