How to prevent divs from moving using media queries - html

Question

I'm starting to learn about media queries and am having problems keeping my divs in place. .brandImg and .brandCopy are contained in .brandList at 50%, 50% and 100% respectively. Why is my div shifting over at only 700px without adding any media queries for 700px?
HTML
<div class="brandList">
<div class="brandImg">
<img src="http://placehold.it/600x400" />
</div>
<div class="brandCopy">
<ul>
<li><span>
<img src="images/gpj-baker-text.png" width="162" height="25" />
</li></span>
<li><span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare faucibus nibh, quis hendrerit eros luctus sed. Nullam at lacinia dui. Phasellus ullamcorper neque turpis, nec luctus sapien tempor vitae. Pellentesque a vestibulum arcu. Fusce volutpat eu ipsum nec ornare. Nulla nec viverra lorem. Donec imperdiet lacus ac turpis ornare.</p>
</li></span>
<li><span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare faucibus nibh, quis hendrerit eros luctus sed. Nullam at lacinia dui. Phasellus ullamcorper neque turpis, nec luctus sapien tempor vitae. Pellentesque a vestibulum arcu. Fusce volutpat eu ipsum nec ornare. Nulla nec viverra lorem. Donec imperdiet lacus ac turpis ornare.</p>
</li></span>
<li><span>
Explore <i class="fa fa-caret-right"></i>
</li></span>
</ul>
</div>
<div class="clearfloat"></div>
</div> <!-- end brandList -->
CSS
.brandContainer {
text-align: center;
vertical-align: middle;
}
.brandList {
display: block;
float: left;
overflow: hidden;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
}
.brandList:last-child {
border-bottom: 0px;
padding: 0 0 16px 0;
}
.brandList:last-child::after {
display: none;
}
.brandList::after {
border-bottom: 1px solid #676767;
content: '';
display: block;
height: 1px;
margin: 16px 16px 20px 16px;
max-width: 98%;
vertical-align: middle;
}
.brandImg {
align: center;
display: inline-block;
float: left;
margin: 0 auto;
min-width: 360px;
overflow: hidden;
padding: 0 0 0 16px;
text-align: center;
vertical-align: middle;
width: 48%;
}
.brandImg a img {
display: block;
height: auto;
width: 100%;
vertical-align: middle;
}
.brandCopy {
display: inline-block;
float: left;
min-width: 360px;
overflow: auto;
padding: 0 16px 0 16px;
width: 48%;
}
.brandCopy ul {
display: table;
min-width: 320px;
table-layout: fixed;
top: 50%;
}
.brandCopy li {
display: inline;
text-align: center;
display: table-row;
}
.brandCopy li span p {
line-height: 150%;
text-align: left;
}
.brandCopy li span a {
font-size: 75%;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.brandCopy li span a:link,
.brandCopy li span a:visited {
color: #4284b8;
font-weight: bold;
text-decoration: none;
}
.brandCopy li span a:hover {
color: #959595;
}
.brandCopy span {
display: table-cell;
padding-top: 16px;
vertical-align: middle;
}

Answer 1

This can be solved in the easiest way by putting a div around the two elements, with max-width of 100% (or maybe 98% because of margins and padding.
With the above div at 100, the two elements inside do not have any reason to shift.