title: Set images' width to 80% of screen width (multiple divs)
body: <p>Please see:
  <a href="https://codepen.io/alanvkarlik/pen/vdWyrd" rel="nofollow noreferrer">https://codepen.io/alanvkarlik/pen/vdWyrd</a></p>
  
  <p>I'm lost atm. My website has images that show up when you hover over the bold text links.</p>
  
  <p>Right now they are showing up with original size, sometimes stretching beyond the screen.</p>
  
  <p>I'd like them all to have the same width - say 80% of the screen width. Where and how do I edit that?</p>
  
  <p>The main block with those links is centered with following divs:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;div class="table-container"&gt;
  &lt;div id="content"&gt;
  </code></pre>
  
  <p>and their css:</p>
  
  <pre><code>#wrapper {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  }
  
  .table-container {
  height:100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  display:table;
  text-align: center;
  }
  
  #content {
  vertical-align:middle;
  height:100%;
  display:table-cell;
  max-width:100%;
  margin: 0 auto;
  font-size: 3vw;
  line-height: 4vw;
  font-family: 'Vesper Libre', serif;
  text-align: justify;
  color: #fff;
  }
  </code></pre>
  
  <p>Basically I used this set up to make sure the block of links is always in the centre of the screen (both width and height wise).</p>
  
  <p>Any help will be appreciated !</p>