title: The align of the laravel not properly cause by multiple embedded css and external css in one blade file
body: <p>I am using laravel as my framework, i am facing the problem which is i @extends a php into another php, it works fine. But i not sure why the layout will become strange when the page is loading finish.</p>
  
  <p>This is my code </p>
  
  <pre><code>@extends('layouts.cal')
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;title&gt;Laravel&lt;/title&gt;
  
      &lt;!-- Fonts --&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- Styles --&gt;
      {{-- &lt;link href="{{ elixir('css/app.css') }}" rel="stylesheet"&gt; --}}
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;style&gt;
          body {
              font-family: 'Lato';
          }
  
          .fa-btn {
              margin-right: 6px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id="app-layout"&gt;
  &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
  
              &lt;!-- Collapsed Hamburger --&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;!-- Branding Image --&gt;
              &lt;a class="navbar-brand" href="{{ url('/') }}"&gt;
                  Laravel
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="spark-navbar-collapse"&gt;
              &lt;!-- Left Side Of Navbar --&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="{{ url('/') }}"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;!-- Right Side Of Navbar --&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;!-- Authentication Links --&gt;
                  @if (Auth::guest())
                      &lt;li&gt;&lt;a href="{{ url('/login') }}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="{{ url('/register') }}"&gt;Register&lt;/a&gt;&lt;/li&gt;
                  @else
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                              {{ Auth::user()-&gt;name }} &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
  
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="{{ url('/logout') }}"&gt;&lt;i class="fa fa-btn fa-sign-out"&gt;&lt;/i&gt;Logout&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      @section('content1')
                          &lt;div id="calendar"&gt;&lt;/div&gt;
                          @endsection
                  @endif
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  @yield('content')
  
          &lt;!-- JavaScripts --&gt;
  {{-- &lt;script src="{{ elixir('js/app.js') }}"&gt;&lt;/script&gt; --}}
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My cal.blade.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' /&gt;
      &lt;link href='css/fullcalendar.css' rel='stylesheet' /&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- Styles --&gt;
      {{-- &lt;link href="{{ elixir('css/app.css') }}" rel="stylesheet"&gt; --}}
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      {{--&lt;link href='css/fullcalendar.print.css' rel='stylesheet' media='print' /&gt;--}}
      &lt;link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' /&gt;
      &lt;link href='css/fullcalendar.css' rel='stylesheet' /&gt;
      {{--&lt;link href='css/fullcalendar.print.css' rel='stylesheet' media='print' /&gt;--}}
      &lt;script src='js/lib/moment.min.js'&gt;&lt;/script&gt;
      &lt;script src='js/lib/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='js/fullcalendar.min.js'&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(document).ready(function() {
  
              $('#calendar').fullCalendar({
                  theme: true,
                  header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'month,agendaWeek,agendaDay'
                  },
                  dayClick: function(date, allDay, jsEvent, view) {
                      $("#eventdata").show();
                      $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
                  },
  
              });
  
          });
  
      &lt;/script&gt;
      &lt;style&gt;
  
          body {
              margin: 40px 10px;
              padding: 0;
              font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
              font-size: 14px;
          }
  
          #calendar {
              max-width: 900px;
              margin: 0 auto;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  @yield('content1')
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What i added is </p>
  
  <pre><code>@extends('layouts.cal')
  </code></pre>
  
  <p>And in the if else statement, i add </p>
  
  <pre><code>@section('content1')
   &lt;div id="calendar"&gt;&lt;/div&gt;
  @endsection
  </code></pre>
  
  <p>The function works fine, i just cant find out what is the problem why the layout will change when the page is loading finish.
  <a href="https://i.stack.imgur.com/asAKF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/asAKF.png" alt="Laravel Page"></a></p>
  
  <hr>
  
  <p><strong>I tried this method.</strong></p>
  
  <pre><code>@extends('layouts.cal')
  @section('content')
  //my code here
  @if (Auth::guest())
                      &lt;li&gt;&lt;a href="{{ url('/login') }}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="{{ url('/register') }}"&gt;Register&lt;/a&gt;&lt;/li&gt;
                  @else
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                              {{ Auth::user()-&gt;name }} &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
  
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="{{ url('/logout') }}"&gt;&lt;i class="fa fa-btn fa-sign-out"&gt;&lt;/i&gt;Logout&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      @section('content1')
                          &lt;div id="calendar"&gt;&lt;/div&gt;
                          @endsection
                  @endif
  
  
  @endsection
  </code></pre>
  
  <p>It is still works, but the problem is the navigation bar of the page will be disappear when the user is not login.</p>
  
  <hr>
  
  <p>After modified the cal.blade.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' /&gt;
      &lt;link href='css/fullcalendar.css' rel='stylesheet' /&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- Styles --&gt;
      {{-- &lt;link href="{{ elixir('css/app.css') }}" rel="stylesheet"&gt; --}}
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      {{--&lt;link href='css/fullcalendar.print.css' rel='stylesheet' media='print' /&gt;--}}
      &lt;link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' /&gt;
      &lt;link href='css/fullcalendar.css' rel='stylesheet' /&gt;
      {{--&lt;link href='css/fullcalendar.print.css' rel='stylesheet' media='print' /&gt;--}}
  
      &lt;style&gt;
  
          body {
              margin: 40px 10px;
              padding: 0;
              font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
              font-size: 14px;
          }
  
          #calendar {
              max-width: 900px;
              margin: 0 auto;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src='js/lib/moment.min.js'&gt;&lt;/script&gt;
  &lt;script src='js/lib/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='js/fullcalendar.min.js'&gt;&lt;/script&gt;
  &lt;script&gt;
  
      $(document).ready(function() {
  
          $('#calendar').fullCalendar({
              theme: true,
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
              dayClick: function(date, allDay, jsEvent, view) {
                  $("#eventdata").show();
                  $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
              },
  
          });
  
      });
  
  &lt;/script&gt;
  
  @yield('main_add_js')
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>