Content spills out of DIV's bottom - html

Question

Content of two DIVs spills out of the bottom.
This problem arises not with all browsers. Chrome, IE, Edge - works fine but Firefox, Safari and Chrome for mobile (Android) reflects this problem.
Screenshot: chrome for Android (tablet device)
What's wrong with the code?
html {
height: 100%;
}
body {
background-image: url("background.jpg");
background-size: cover;
background-position: center center;
background-repeat: repeat;
height: 100%;
font-family: 'Times New Roman', Times, sans-serif;
font-size: 16px;
}
#open-hours {
float: left;
}
#contacts {
float: right;
}
.ins {
width: 4%;
height: 4%;
}
hr {
background-color: black;
}
#first-row-1 {
width: 362px;
height: 264px;
margin-right: -4px;
}
#first-row-1 img {
width: 100%;
height: 100%;
}
#first-row-2 {
width: 360px;
height: 262px;
border: 1px solid black;
vertical-align: top;
}
#first-row-2 h4 {
margin-top: 5px;
}
#first-row-1,
#first-row-2,
#second-row-1,
#second-row-2 {
display: inline-block;
}
#first,
#second,
h2 {
text-align: center;
}
#first-row-2 ul,
#second-row-1 ul {
text-align: left;
}
#logo {
width: 358px;
height: 34px;
}
#logo img {
width: 68px;
height: 34px;
}
#second-row-1 {
width: 360px;
height: 262px;
border: 1px solid black;
vertical-align: top;
margin-right: -4px;
}
#second-row-2 {
width: 362px;
height: 264px;
}
#second-row-2 img {
width: 100%;
height: 100%;
}
#second {
margin-top: -4px;
}
#media only screen and (max-width: 766px) {
#first-row-1,
#second-row-2,
#hide,
.ins,
.free-space {
display: none;
}
#open-hours,
#contacts {
float: none;
text-align: center;
}
#first-row-2,
#second-row-1 {
border: 1px solid black;
margin: 0 auto;
display: block;
width: 100%;
}
#second {
margin: 0px;
}
span {
display: block;
}
h2 {
font-size: 18px;
}
h4 {
margin: 5px 0px -10px 0px;
}
#logo {
margin: auto;
}
}
#media only screen and (max-width: 393px) {
#logo {
display: none;
}
#first-row-2,
#second-row-1 {
min-width: 285px;
}
}
<div>
<div id="open-hours">пн-пт 10.00-20.00</div>
<div id="contacts">
<img class="ins" src="phone_pic.png"> text
<img class="ins" src="envelope_pic.png"> <span>text</span>
</div>
<br class="free-space">
<hr>
<br class="free-space">
<h2>Успешный опыт продаж <span id="hide">кондиционеров и климатической техники</span> с 2007 года</h2>
<div id="first">
<div id="first-row-1">
<img src="photo_1.jpg">
</div>
<div id="first-row-2">
<h4>Мы предлагаем широкий спектр оборудования</h4>
<ul>
<li>бытовые кондиционеры</li>
<li>кондиционеры для коммерч. применения</li>
<li>тепловые насосы</li>
<li>осушители воздуха</li>
<li>мультизональные VRF системы</li>
<li>системы бытовой, полупромышленной и промышленной вентиляции</li>
<li>приточно-вытяжные агрегаты</li>
<li>тепловые завесы</li>
</ul>
<div id="logo">
<img src="logo.gif">
<img src="logo.png">
<img src="log.png">
<img src="logo.png">
<img src="logo.jpg">
</div>
</div>
</div>
<div id="second">
<div id="second-row-1">
<h4>Оплата</h4>
<ul>
<li>наличный расчет - в пункте выдачи или по факту доставки продукции</li>
<li>безналичный расчет - оплата физическими и юридическими лицами</li>
</ul>
<h4>Доставка</h4>
<ul>
<li>самовывоз</li>
<li>собственным транспортом компании</li>
<li>почтовыми, курьерскими службами Украины</li>
</ul>
</div>
<div id="second-row-2">
<img src="photo_2.jpg">
</div>
</div>
</div>

Answer 1

Try to replace height of first row and second row divs to min-height and height to auto
#first-row-1{
width: 362px;
height:auto;
min-height: 264px;
margin-right: -4px;
}
#first-row-2{
width: 360px;
height:auto;
min-height: 262px;
border: 1px solid black;
vertical-align: top;
}

Answer 2

I tried to fix your issue without making too many changes, but really the issue is, that you are setting fixed height to child elements and they overflows their parents. I'd suggest to make the layout responsive to save yourself headaches in the future when you'll want to write longer paragraphs.
Without changing the code too much, you could
do following changes to the first and second divs
display: flex;
Desired width, e.g. 2*362
margin: auto;
Following to first-row-1, first-row-2 and the same for second row
delete width and height attributes (or change height to min-height for design purposes)
flex: 1 0 0;