CSS doesn't effect in blade - laravel

Question

I'm encountering a problem today: I just created a new blade view that displays my HTML, but my CSS doesn't work! I tried several ways like putting it directly on the page, putting it outside my layout, nothing to do... it works on all my other pages that are exactly the same place on my workspace.
Here is my blade file:
#extends('layouts.default')
#section('content')
<section class="blog-outer-area mt-5">
<div class="content-area">
<div class="blog-area-sec">
<!-- Start: Blog Sec -->
<div class="blog-sec">
<div class="container">
<!-- Start:Blog Area -->
<div class="blog-inner-area row">
<!-- Start:Blog Left Content-->
<div class="col-lg-8 left">
<div class="item-box">
<div class=" img-holder">
<img src="template/img/home-blog-1.jpg" alt="">
</div>
<div class=" img-holder">
<img src="template/img/home-blog-1.jpg" alt="">
</div>
<div class="info-text-holder">
<h4>{{ $article->titre }}</h4>
<span>{{ $article->created_at->format('d/m/Y') }}</span>
<p>{{ $article->description }}</p>
<ul class="social-icon-simple">
<li><i class="fa fa-facebook"></i></li>
</ul>
</div>
</div>
</div>
<!-- End:Blog Left Content-->
<!-- Start:Blog Right Content-->
<div class="col-lg-4 ">
<div class="right">
<input type="text" name="search" class="search-btn" placeholder="Search Here">
<!-- Start:Recent Posts-->
<h5>Recent posts</h5>
<ul class="recent-post">
<!-- Start:Post 1-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-4.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>Stetina savours Tour de France return</p>
</div>
</div>
</div>
</li>
<!-- End:Post 1-->
<!-- Start:Post 2-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-5.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>Top Fitness Gear to Help You Workout</p>
</div>
</div>
</div>
</li>
<!-- End:Post 2-->
<!-- Start:Post 3-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-6.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>The Southern Ocean is the 'newest' named ocean</p>
</div>
</div>
</div>
</li>
<!-- End:Post 3-->
</ul>
<!-- End:Recent Posts-->
</div>
</div>
<!-- End:Blog Right Content-->
</div>
<!-- End:Blog Area -->
</div>
</div>
<!-- End: Blog Sec -->
</div>
</div>
</section>
#endsection
My Layout integrations:
<link type="text/css" rel="stylesheet" href="template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="template/css/style.css"><!-- Light Theme Core CSS -->
<!-- Google Fonts here -->
<link href="template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="template/css/fonts/open-sans.css" type='text/css'>
<link href="template/css/fonts/lato.css" rel='stylesheet' type='text/css'>
My workspace looks like this:

Answer 1

Try this
<link type="text/css" rel="stylesheet" href="/template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="/template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="/template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="/template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="/template/css/style.css"><!-- Light Theme Core CSS -->
<!-- Google Fonts here -->
<link href="/template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="/template/css/fonts/open-sans.css" type='text/css'>
<link href="/template/css/fonts/lato.css" rel='stylesheet' type='text/css'>