title: External CSS file not working alongside bootstrap
body: <p>I am trying to add custom styling to my web app. Here is the link to my code:</p>
  
  <p><a href="https://github.com/SammyAbukmeil/rps-challenge" rel="nofollow">https://github.com/SammyAbukmeil/rps-challenge</a></p>
  
  <p>In <code>layout.erb</code> I have the following:</p>
  
  <pre><code>&lt;head&gt;
    ...
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/custom.css"&gt;
    ...
  &lt;/head&gt;
  </code></pre>
  
  <p>Which should be loading my <code>custom.css</code> file.</p>
  
  <p>In <code>views/index.erb</code> I have an ID of test: </p>
  
  <pre><code>&lt;img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png"&gt;
  </code></pre>
  
  <p>and in <code>css/custom.css</code> I am calling that ID:</p>
  
  <pre><code>#test {
    margin-top: 50px;
  }
  </code></pre>
  
  <p>But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in <code>layout.erb</code> and is adding styling to the <code>.erb</code> files throughout the project) is working.</p>
  
  <p>I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.</p>
  
  <p>Any advice is greatly appreciated. Thanks!</p>
  
  <p>EDIT: So i checked the console and found this: </p>
  
  <pre><code>...
  Status Code: 404 Not Found
  Request URL: http://localhost:4567/css/custom.css
  ...
  </code></pre>
  
  <p>So I guess I'm not linking it right.</p>