Bootstrap overrides my custom CSS : Out of nowhere Bootstrap suddenly started overriding my custom CSS. The site has worked perfectly in about 1 month, then I updated the favicons, and everything started messing up.

Trying to solve the problem with updating to the newest Boostrap (version 4), and included everything correctly. Bootstrap CSS is being loaded before my custom CSS. However, nothing changes.

**Header**

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    	
    <!-- Load jquery -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    	
    <!-- Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
       
    <!-- Style.css -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/style.css">

The easiest place to show where Bootstrap overrides my CSS is with the style `.btn`. 

In my custom CSS I have set up the following: (loaded from style.css:936)

    .btn {
      border-radius: 0px;
    }

In the browser .btn is showing up like this: (loaded from bootstrap.css?ver=2.3:2618)

    .btn {
       border-radius: 4px;
    }

Any ideas how to fix this problem? It's pretty strange that everything worked perfectly for a long time before I updated the favicons.

**The page can be found here:** http://www.snekkergrytvik.no/