Doubt with CSS selector

You can use the :nth-child selector to remove the margin to each X elements according to your need:

/* A cada 2 elementos, retira a margem */
.linhasFotos:nth-child(2n+2){
  margin-right:0;
}

You can use this test of the :nth created by CSS-Tricks staff.

Example

li:nth-child(2n+2){
  color:pink;
}

<ul>
  <li>1º</li>
  <li>2º</li>
  <li>3º</li>
  <li>4º</li>
  <li>5º</li>
  <li>6º</li>
  <li>7º</li>
  <li>8º</li>
</ul>

If you want to ensure that you are selecting only the h2 elements, 2 by 2, you can use the :nth-of-type . So we can mix other elements together with the h2 , and still select them 2 by 2.

All modern browsers support this selector , but IE8 and other older browsers will have problems. It also has a compatibility table for the end of the MDN page .

In another answer, I explain in detail the selectors : :first-child , :last-child , :nth-child , :nth-last-child , :first-of-type , :last-of-type , :nth-of-type , :nth-last-of-type

In the example below, I added a DIV before H2. But it could be 2 DIVs or no DIVs, which would make no difference ... it would work anyway.

.linhasFotos {
  float: left;
  margin-right: 20px;
  overflow: hidden;
  width: 200px;
  height: 100px;
}
h2.linhasFotos:nth-of-type(2n+1) {
  clear: both;
}
h2.linhasFotos:nth-of-type(2n) {
  margin-right: 0;
}
#container {
  border: 1px solid black;
  overflow: hidden;
  display: inline-block;
}

<div id="container">
  <div>Esse div não influencia no CSS, pois usa-se 'nth-of-type'</div>
  <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
  <!--Toda página deve conter pelo menos 1 (uma) tag h2-->

  <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
  <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
</div>

Use the : last-child

.linhasFotos a:last-child {
    margin-right: 0;
}

You want to put margin-right to the last element of the line, but in the structure of your HTML there is no defined line. To do this, I recommend creating a container for each two photos, as follows:

<div id="container">
    <div class="container-imagens>"
        <h2 class="linhasFotos">
            <a title="nome da linha" href="/lancamentos">
                <img src="../../public/images/foto-01.jpg" class="img-zoom" alt=""/>
            </a>
        </h2><!--Toda página deve conter pelo menos 1 (uma) tag h2-->

        <h2 class="linhasFotos">
            <a title="nome da linha" href="/lancamentos">
                <img src="../../public/images/foto-01.jpg" class="img-zoom" alt=""/>
            </a>
        </h2>
    </div> <!-- end of .container-imagens -->    

    <div class="container-imagens">
        .
        .
        .
    </div> <!-- end of .container-imagens -->
</div> <!-- end of #container -->  

In this way, you have more control over each 'line' of images, and now you can use the :last-of-type selector to add margin-right: 0 , which was your question. your CSS would then look like this:

.container-imagens > .linhasFotos:last-of-type{margin-right: 0}

Note that this selector will only work if, in your HTML, .linhaFotos elements are direct children of .container-imagens elements. You can read more about the selectors here.

I can recommend 3 things:

I hope I have helped! =)

EDIT: The third concept proof container shows the leaner HTML, as I suggested in item 3.