css - divタグを並べて配置

Question

ですから、これはばかげた質問ですが、私は一生これを機能させることができません。

サイズが設定されたdivクラスのdivタグがあり、すべてを水平方向に1行にまとめたいと考えています。現在、最初の画像は内側のdivタグと2番目の画像の上に表示されています。floatを追加してみました：left; そしてそれはページ全体を干し草にするようです。

Css

#arrows {
    align: middle;
    width: auto;
    float: inherit;
    display: inline-block;
    height: 500px;
    overflow: hidden;
    white-space: nowrap;
}
.portfolio {
    align: middle;
    width: 750px;
    float: inherit;
    display: inline-block;
}

HTML

<div id="arrows">
    <p>
        <img src="../images/left.jpg" width="64" height="105" align="middle" />
        <div class="portfolio">
            <img src="../images/portfolio/borderpatrollogo.jpg" alt="U.S.   Border Patrol Brand Identity" width="564" height="475" align="middle" />
        </div>
        <img src="../images/right.jpg" alt="next" width="64" height="105" align="middle" />
    </p>
</div>