Área clicável maior que a imagem

Olá Thiago, tudo bem?

As imagens estão dentro das tags <figure>. O navegador está atribuindo a essas tags uma margem, por isso a área clicável do botão fica maior do que a imagem. Pra resolver isso basta colocar no seu css:

figure{
    margin: 0;
}

E como o seu footer está position:fixed, pra descolar ele dos elementos que estão dentro do seu <main>, vc pode colocar no seu css:

main {  
  margin-bottom: 100px;
  overflow: hidden;
}

Ou você ainda pode trocar a propriedade do seu footer no css:

de: position: fixed;

para: position: relative;

Bons estudos!

Obrigado. Retirei as imagens de dentro das tags . Isso resolveu o problema dos links e do footer, porém a borda das imagens continua grande, não estão conforme o tamanho e continuam fora de alinhamento.

<ul class="portfolio">
                <li>
                    <a href="http://bmw.com" id='bmw'>
                        <img src='bmw.png' alt='Foto da BMW'/>
                        <figure>
                            <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="http://uol.com.br" id="uol">
                        <img src='uol.png' alt='Foto do Uol'>
                        <figure>
                            <figcaption>UOL.com.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="http://ibm.com" id="ibm">
                        <img src='ibm.png' alt='Foto do Uol'>
                        <figure>
                            <figcaption>IBM.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="http://g1.com.br" id="g1">
                        <img src='G1.png' alt='Foto do G1'>
                        <figure>
                            <figcaption>G1.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>

CSS

html{
    background-color: #CCE0FF;
    line-height: 1.5;
}

p{
    padding: 20px;
}

h1{
    font-size: 60px;
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: #851944;
    color: #fff;
    padding: 5px;
    border-bottom: 10px solid #000000;
}

.portfolio li{
    float: left;
    border: 8px solid black;
    display: inline-block;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.portfolio img{
    width= 100%;
}

footer{
    font-size: 15px;
    color: #fff;
    background-color: #000;
    padding: 10px;
    padding-top: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
    clear: both;
}

Thiago, tem um erro de escrita no css:

errado:

.portfolio img{
    width= 100%;
}

correto:

.portfolio img{
    width: 100%;
}