Get two images side by side to decrease and increase as the page is resized

I have two div’s that are sitting side by side and contain images in them. When the webpage is the size of my Macbook 13 inch screen the photos sit side by side perfectly. However when I start to increase the screen width the photos start to spread apart leaving a huge gap in between.

How do I get both photos to stay side by side even when the browser page increases or decreases? `

.pic {
  max-width: 100%;
}

#pic2 {
  max-width: 100%;
}

.photosection {
  background-color: black;
  max-width:1400;
  height:363px;
}

#photosection1 {
  float:left;
  max-width: 110vw;
}

#photosection2 {
  max-width:50%;
  float:right;
}

<div class="photosection">
  <div id="photosection1">
    <a  href="#" class="">
      <span class="text">
        Treat Yourself
        Intuitive Language Coaching
        (Intuitive Life-Coaching + Communication Training)
      </span>
      <img class="pic" src="images/oneonone.jpg" alt="inspiremug">
    </a>
  </div>

  <div id="photosection2">
    <a  href="" class="">
      <span class="text">
        Treat Your Group, Business or Organization
        I'll bring the sweets!
      </span>
      <img id="pic2" src="images/groupsession.jpg" alt="necklace">
    </a>
  </div>
</div>

#photosection1 {
    width: 50%;
    float: left
}

#photosection2 {
    width: 50%;
    float: right
}

add width="100%" to your image tag

<img class="pic" src="images/oneonone.jpg" alt="inspiremug" width="100%">
<img id="pic2" src="images/groupsession.jpg" alt="necklace" width="100%">

Related Articles