ایراد در دیزاین دو div کنار هم

دوست عزیز من تست کردم مشکل شما اینه که از position ها استفاده نکردین. فقط کافیه other-back و other-film رو به این صورت تغییر بدین

#other-back{
 display: inline-block;
 width: 30%;
 padding: .1em;
 background-color: #818497;
 position:relative;
} 

.other-film{
 width: 100%;
 text-align: center;
 background-color: #e6e6e6;
 position:absolute;
 top:0;
}

یعنی شما به کلاس پدر position:relative بدین تا کلاس فرزندش که حالا position:absolute گرفته، بیاد و خودش رو نسبت به پدرش تنظیم کنه. چطوری؟ کافیه به فرزند top و left و right و bottom بدین که در اینجا ما به فرزندش top:0 دادیم که چیزیه که شما میخواستین. از float هم میشه استفاده کرد فکر کنم.

سلام آقای عظیمی عزیز. حق با شماست. من تغییراتی رو در کدها دادم و همون طور که در پاسخ اول گفتم از float هم میشه استفاده کرد و من در پاسخ دوم از این روش استفاده کردم. امیدوارم جوابتون همون چیزی باشه که من فکر میکردم. موفق باشد.

 <html>
<head>
<title>
</title>

<style>

body{
 background-image: url('F:/projects/asanBedan/image/cover/cover.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 direction: rtl;
}
#background-hide{
 width: 70%;
 margin: 1% auto;
 text-align: center;
 background-color: red;
 height: auto;
}
#learn-back{
 float: right;
 margin: 1%;
 width: 65%;
 background-color: #2f3238;
}
#other-back{
 display: inline-block;
 margin: 1%;
 width: 30%;
 padding: .1em;
 background-color: #818497;
}
.other-film{
 width: 100%;
 text-align: center;
 margin-top: .1em;
 background-color: #e6e6e6;
}

</style>

</head>

<body>
<div class="header-wrapper" id="myHeader" style="display: block">
<a href="login.html" class="btn-pink btn-head"> login</a>
<a href="signup.html" class="btn-pink btn-head">

ثبت نام

</a>
<span class="btn-green btn-head nav">

|||
</span>
</div>

<div id="background-hide">
    <div class="row-white" id="learn-back">
        something
    </div>
    <div class="row-white" id="other-back">
    <div class="other-film">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
    <img style="width: 100%;height: auto;" src="22.jpg">
</div>
</div>
</div>
</body>
</html>