Aligning two content causes content to shrink right away - html

Question

I am trying to align two content next to each other in a way when the broswer minimizes, the content will not move/shrink/ until the screen touchees the content. I tried to replicated aligning two content close to each other but failed. Whenever the browser shrinks, the image shrinks right away instead of shrinking when the window touches the content. Below is the code I am using,
<div class="prod_section">
<div class="border col-md-6">
<img src="img/land_prod_one.jpg" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="img/land_prod_two.jpg" class="word">
<h2>content2</h2>
</div>
</div>
.prod_section{
margin: auto;
width: 60%;
padding: 10px;
padding-top:220px;
}
.word{
max-width:100%;
}
Below is an image displaying how I am trying to make the content look. This is in the website called Obey Clothing. If anyone can help out, it would greatly be appreciated. Thank you for your time.

Answer 1

1st, the width of the container is set to 60%, which cause your content to shrink sometime (depend on the size of the img)
2nd, you might want to add clearfix to your container check the two example below in full-page to see the difference.
.prod_section {
margin: auto;
width: 60%;
padding: 10px;
padding-top: 220px;
background: green;
}
.word {
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="prod_section">
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content2</h2>
</div>
</div>
Solution:
.prod_section {
margin: auto;
width: 60%;
padding: 10px;
padding-top: 220px;
background: green;
}
.word {
max-width: 100%;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="prod_section clearfix">
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content1</h2>
</div>
<div class="border col-md-6">
<img src="http://via.placeholder.com/150x350" class="word">
<h2>content2</h2>
</div>
</div>