a href affecting how images are displaying

Question

The four smaller images should be in a 2 by 2 grid and the larger image should fill the same width as two of the smaller images.

It all works without adding a href link. As soon as I add a link then they get put in a link down the left side of the page.

This is a link to my HTML & CSS. enter code herehttps://jsfiddle.net/67soh1s3/

Answer 1

You can change you code to this

* {
  box-sizing: border-box
}
#post-template-container {
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  background-color: #404040;
}
#show-write-up-section {
  position: relative;
  width: 98%;
  height: 100%;
  padding: 1%;
  margin: 1%;
  background-color: #404040;
}
#title-of-show {
  text-align: center;
  color: #FFDD00;
}
#show-information {
  text-align: center;
  color: #FFFFFF;
}
#production-photo-gallery {
  width: 100%;
  background-color: #404040;
  text-align: center
}
#production-photo-gallery ul {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}
#production-photo-gallery ul li {
  width: 48%;
  padding: 5%;
  display: inline-block;
  list-style: none
}
#production-photo-gallery ul#main-production-image li {
  width: 100%;
}
#production-photo-gallery ul li img {
  width: 100%;
}
#main-production-image {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

<div id="post-template-container">
  <div id="show-write-up-section">
    <h1 id="title-of-show">Sample Title</h1>
    <p id="show-information">Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample
      text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text
      Sample text sample text Sample text sample text Sample text Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample
      text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text
      sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text</p>
    <div id="production-photo-gallery">
      <ul>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
      </ul>
      <ul id="main-production-image">
        <li>
          <a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
            <img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>