I cannot get my code to put these three images side by side. Well, I did it once, as pictured below, but I chnged something unknowingly and messed it up. How can I fix it?

THIS is what it should look like.

This is what it looks like at the moment. The cursor is off to the side of the container and the hover still working. That should be reserved for howering on the image only.

CSS

@charset "utf-8"; /*  Presidential Planting Style Sheet   Filename: styles.css  */  /* HTML and Body styles */  html { background: #FAF0CF; font-family: Verdana, sans-serif; } body > header > img { display: block; width:100%; } /* Page Header Styles */  nav.horizontalTabs ul { list-style: none; margin: 0; padding: 0; display:flex; flex-flow: row wrap; justify-content: space-around; background-color: blueviolet; } nav.horizontalTabs li { opacity: 1; display: flex; float:left; padding-left: 10px; padding-right: 10px; } nav.horizontalTabs a{ display: block; color: white; text-align: center; padding: 15px; text-decoration: none; font-size: 17px; font-weight: normal; } nav.horizontalTabs a:hover{ color: yellow; } /* Homepage president drawing styles */  .gallery { display: flex; flex-wrap: wrap; } .gallery img { display: flex; float:left; margin: 35px auto 30px auto; } .clear { clear: both; } /* Styles for homepage images */  .image{ float: left; opacity: 1; display: flex; flex-wrap: wrap; transition: 1s ease; } .middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; text-align: center; } .gallery:hover .image { opacity: 0.3; transform: scale(1.2, 1.2); } .gallery:hover .middle { opacity: 1; } .name { background-color: #4CAF50; color: white; font-size: 16px; padding: 16px 32px; } /* Styles for the quiz */  #quiz { padding: 30px 150px; } #quiz legend { text-align: center; padding-bottom: 5px; font-size: 30px; } #quiz .formRow { text-align: center; width: 50%; padding: 5px; border-radius: 10px; border: 1px solid black; background-color: #e9e6ff; margin: 20px; } .formRow #htFarm { margin-top:10px; text-align: center; } .formRow #jaFarm { margin-top:10px; } .formRow #jtFarm { margin-top:10px; } .formRow #tjFarm { color: green; margin-top: 10px; padding: 10px 10px; } /* Footer styles */  .footer { margin-top: 20px; padding: 10px; background-color: #efefef; text-align: center; } section { margin-bottom: 40px; padding-right: 30px; padding-left: 30px; } /* Slideshow styles */  * {box-sizing:border-box} /* Slideshow container */ .slideshow { max-width: 400px; position: relative; margin: 50px auto auto auto; } /* Hide the images by default */ .garden_pics { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } .headline_text { font-family: Geneva sans-serif; line-height: 1.6; font-size: 55px; position: absolute; right: 500px; top: 45px; } /* Caption text */ .text { color: purple; font-size: 15px; padding: 8px 12px; position: absolute; left: 400px; top:300px; width: 100%; text-align: center; word-wrap: break-word; } /* Number text (1/3 etc) */ .number_text { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fade in and fade out animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1s; animation-name: fade; animation-duration: 1s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } HTML

strong>html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1" /> meta name="keywords" content="presidents, farming, gardening, seeds, planting"/> title>Presidential Plantingtitle> link href="reset.css" rel="stylesheet" /> link href="styles.css" rel="stylesheet" /> head> body> header> img src="header_logo.png" alt="" id="presHeader" /> nav class="horizontalTabs"> ul> li>a href="18th_century.html">18th Centurya>li> li>a href="19th_century.html">19th Centurya>li> li>a href="20th_century.html">20th Centurya>li> li>a href="about.html">Abouta>li> li>a href="contact.html">Contact Usa>li> li>a href="quiz.html">Quiza>li> ul> nav> header> div class="gallery"> img src="truman_dent_corn2.png" width="320px" height="200px" alt="John Adams"  class="image"/> div> div class="gallery"> img src="truman_dent_corn2.png" width="320px" height="200px" alt="John Adams"  class="image"/> div> div class="gallery"> img src="truman_dent_corn2.png" width="320px" height="200px" alt="John Adams"  class="image"/> div class="clear"> div> div> section> p>Presidents George Washington and Thomas Jefferson's managed - under the ownership of many slaves - large estates that survive to this day. Estates that are continually researched and unmasked by historians and archaeologists and which have led to a rich and complicated stoyline continues to intrigue. p> br> p>And while both men are inextricably linked to their lives as farmers, there were other presidents in both the 19th and 20th centuries with farming backgrounds. And often those parts of their lives are not highlighted because often the presidents themselves are rarely talked about in any context. John Tyler? Anyone? p> br> p>This site is not meant to exhaust the record on each presidents agricultural legacy. Instead its to serve as a place to learn a little more about where and what presidents grew. Click the tab at the top find out the crops - and, in some cases - the varieties, they grew.p> section> div class="footer"> Written by span>a href="mailto:rlee0064@email.vccs.edu">Not A President. Copyright 2018.a>span> div> body> html> 

Home 18th Century 19th Century 20th Century About Contact Us