Html 导航菜单中的内容被推到左侧

我正在尝试使用Laravel构建我的第一个项目，使用blade和Bootstrap作为HTML/CSS框架

我很难找出是什么导致了一个恼人的bug。我有几页包括导航菜单。只有在索引页上，导航菜单的内容才会向左按

我发现是什么代码部分导致了这个问题，但我不知道我做错了什么

情况就是这样： 在索引页面上，导航栏的全部内容向左按几个像素

索引页的完整代码为：

@extends('layouts.app')

@section('content')
  <h1>New Blog Posts</h1>
  @if(count($posts) > 0)
    @foreach($posts as $post)
      <!-- bouw een entry -->
      <div class="card mb-2">
        <div class="card-body">
          <div class="row">
            <div class="col-md-4 text-center">
              <img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/{{ $post->cover_image }}">
            </div>
            <div class="col-md-8 p-1">
              <h3><a href="/posts/{{ $post->id }}">{{ $post->title }}</a></h3>
              {!! substr($post->body, 0, 500).'...   ' !!}<a href="/posts/{{ $post->id }}">Read on</a>
              <small>Written on {{ $post->created_at }} by {{ $post->user->name }}</small>
            </div>
          </div>
        </div>
      </div>
    @endforeach
    <div class="row d-flex justify-content-center">
        {{ $posts->links() }}
    </div>
  @else
    <p>No posts found.</p>
  @endif
@endsection

@extends（'layouts.app'））
@节（“内容”）
新博客帖子
@如果（计数（$posts）>0）
@foreach（$posts作为$post）
封面图片}}“>
{！！substr（$post->body，0500）。“…”！！}
由{{{$post->user->name}在{{{$post->created_at}}上编写
@endforeach
{{$posts->links（）}
@否则
没有找到帖子

@恩迪夫
@端部

导致故障的两条线路是：

<img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/{{ $post->cover_image }}">

cover\u image}>

及

{！！substr（$post->body，0500）。“…”

你试过这样吗

<a href="{{ url('/posts/' . $post->id) }}">Read on</a>

为了你的形象

<img src="{{ asset('storage/cover_images/' . $post->cover_image) }}" />

cover\u image）}}”/>

---

请您提供错误消息好吗？我猜越来越多的人在学习过程中遇到了这种情况。不管是不是因为坐在电脑后面太久

我忽略了页面长度。索引页面的长度大于屏幕高度（这不适用于其他页面），导致出现滚动条

在我的CSS中的body标签中添加滚动条，强制在每个页面上显示滚动条，解决了这个问题

body {
    overflow-y:scroll;
}

---

如果

$posts

为空，您是否仍然会遇到问题？请您也为

layouts.app

添加代码。感谢您的回复。我设法解决了问题并发布了解决方案。我想我昨天在屏幕后面坐的时间太长了。

body {
    overflow-y:scroll;
}