How to make a image full screen in css?

Question

I have a image list in html, I am simply trying to make the images full screen however it turned out that the images are full screen but they don't align to the very left of html. The grey is my image.

<div id="pictures">
<ul class="img-list">
    <li>
      <a>
        <img src="images/abc/header.png"/>
      </a>
    </li>
</ul>
</div>

in css

body{
  width:1200px;
  margin:0 auto;
}

ul.img-list {
  list-style-type: none;
  position: absolute;
  width: 100%;
}

#pictures{
  width:1200px;
  margin:0 auto;
}

Answer 1

If you're asking why you have space in the left (and actually even in top).. It's due to:

The default padding of the ul tag.

The default margin top down of the ul tag.

The body has an extra margin by default (you're setting it to default for the right left).

I advise you to use something like Normalize.css or in a stricter way use the global selector (*) to delete all extra margins and paddings you maybe don't want them to exist

Answer 2

You have padding and margin on the ul, I Also changed width: 1200px; to width: 100% on #pictures and body .

Try using:

CSS:

body {
width:100%;
margin:0 auto;
}

ul.img-list {
    list-style-type: none;
    position: absolute;
    width: 100%;
    padding: 0;
    margin: 0;
}

#pictures{
    width:100%;
    margin:0 auto;
}

HTML:

<div id="pictures">
<ul class="img-list">
    <li>
      <a>
        <img src="http://animals.sandiegozoo.org/sites/default/files/2016-09/animals_hero_lions_0.jpg"/>
      </a>
    </li>
</ul>
</div>