水平滚动无法正常工作

Question

我正在尝试在我的主页上使用水平滚动，但它无法正常工作。我也在使用bootstrap。但我不认为这是导致这个问题的原因。而不是滚动它看起来像堆叠在彼此之上。

继承我在视图中的代码

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">


            {{-- The Posts ------------------------------------------------------------------}}


            <div style="background-color:red"><h1>News</h1></div>
            @if ($posts->count())

            <div class="scroll">
                @foreach ($posts as $post)
                    <div class="post-preview" id="box">
                        <a href="{{ $post->url($tag) }}">
                            <h2 class="post-title">{{ $post->title }}</h2>
                            @if ($post->subtitle)
                                <h3 class="post-subtitle">{{ $post->subtitle }}</h3>
                            @endif
                        </a>
                        <p class="post-meta">
                            Posted on {{ $post->published_at->format('F j, Y') }}
                            @if ($post->tags->count())
                                in
                                {!! join(', ', $post->tagLinks()) !!}
                            @endif
                        </p>
                        <hr>
                    </div>
                @endforeach

            @else
                <h1 style="text-align: center">no posts match your search</h1>
            @endif
        </div>

            {{-- End Posts ------------------------------------------------------------------}}





            {{-- The Videos --}}
            <div style="background-color:red"><h1>Videos</h1></div>
            @if ($videos->count())

                <!--<h2>{{ ($videos->count()) }} Articles</h2>  displays count-->

                @foreach ($videos as $video)
                    <div class="post-preview">
                        <a href="{{ $video->url($tag) }}">
                            <h2 class="post-title">{{ $video->title }}</h2>
                            @if ($video->subtitle)
                                <h3 class="post-subtitle">{{ str_limit($video->subtitle, 20) }}</h3>
                            @endif
                        </a>
                        <p class="post-meta">
                            Posted on {{ $video->published_at->format('F j, Y') }}
                            @if ($video->tags->count())
                                in
                                {!! join(', ', $video->tagLinks()) !!}
                            @endif
                        </p>
                    </div>
                    <hr>
                @endforeach

            @else
                <h1 style="text-align: center">no videos match your search</h1>
            @endif
            {{-- End videos --}}



            {{--  {!! $videos->render() !!} --}}

            {{-- The Pager --}}

        </div>

    </div>
</div>
@stop

和继承人css：

#box {
    width: 243px;
    height: 100%;
    margin: 0 4px 5px 0;
    padding:0;
    border-style: solid;
    border-width: 1px;
    /* border-radius: 10px; */
    display: inline-block;

}


.scroll {
    width: 100%;
    padding: 10px 0;
    height: 202px;
    overflow-x: auto;
    overflow-y: hidden;
    /* border: 1px solid; */
    white-space: nowrap;
}

任何有关此的帮助将不胜感激。我在另一个代码中使用过此代码 网站和它的工作