title: CSS gets loaded when I press format in sources under developer console
body: <p>Rails 5 and AWS</p>
  
  <p>I am experiencing a strange issue with CSS loading in production. </p>
  
  <ul>
  <li>I load the home page, then things get loaded without proper application of custom styles</li>
  <li>When I inspect and go to the developer console and view the source of the particular CSS file and press format icon, styles get applied to the page. </li>
  </ul>
  
  <p>Please help. Not sure how to fix this kind of issues.</p>
  
  <p><code>application.html.erb</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content="Explore various articles covering multiple domains."&gt;
      &lt;%= csrf_meta_tags %&gt;
      &lt;%= csp_meta_tag %&gt;
  
      &lt;title&gt;Website&lt;/title&gt;
  
      &lt;link rel="shortcut icon" href="/assets/favicon.ico"/&gt;
  
  
      &lt;!-- Bootstrap 4 related scripts --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Google fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Mukta|PT+Sans|Josefin+Sans" rel="stylesheet"&gt;
      &lt;script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track'=&gt; 'reload' %&gt;
      &lt;%= javascript_include_tag 'application', 'data-turbolinks-track'=&gt; 'reload' %&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;%= yield %&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>_top_menu.html.erb</code>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top-menu raisedbox"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;a class="navbar-brand" href="/"&gt;
        &lt;img src="/assets/logo.svg" width="100em" height="30" class="logo d-inline-block align-top" alt=""&gt;
        Humbleposts
      &lt;/a&gt;
  
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link menu-link-text" href="/articles/index"&gt;&lt;b&gt;BLOG&lt;/b&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link menu-link-text" href="#"&gt;&lt;b&gt;RECENTS&lt;/b&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link menu-link-text" href="#"&gt;&lt;b&gt;ABOUT&lt;/b&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;form class="form-inline"&gt;
        &lt;input class="form-control mr-sm-2" type="search" placeholder="Search for" aria-label="Search"&gt;
        &lt;button class="btn btn-primary my-2 my-sm-0" type="submit"&gt;search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;span class="empty-space"&gt;&amp;nbsp;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>