Problema em ajeitar a imagem com div id

estou com problema no desenvolvimento do meu site, eu gostaria que a imagem ocupasse td a tela , mas ela nao ocupa ate o final , mesmo sendo maior!

estou criando pegando referencia como neste site :

Segue os codigos que deixei na minha CSS

 <main class="content-main fl-left">
         <div id="foto1">
         <article class=" fl-right">
         <h1>UMA NOVA EXPERIÊNCIA PARA QUEM É APAIXONADO POR LIVROS. </h1>
         <p>Somos um clube de assinatura de livros que envia</p>
         <br>
         <p>mensalmente um kit literário à casa dos associados.</p>
         <br>
         <a class="btn btn-blue radius boxshadow" href="" title="Assine">Faça Parte</a>
         
         </div>
            </article>

	        e da div 

/div/
#foto1 {background-image:url(livros4.jpg);width:1300px;height:600px ;margin:0 auto;background-repeat:no-repeat;}