title: CSS styles does not apply PROPERLY into Wordpress custom theme
body: <p>I'm learning how to create custom Wordpress theme from scratch and till now everything was worked fine except the CSS stylesheet which does not seem to be working properly.</p>
  <p>Please take a look at these two print screens:</p>
  <h1>1: <strong>index.html</strong></h1>
  <p><em>(A basic theme which contains html)</em></p>
  <p><a href="https://i.stack.imgur.com/GiB6e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GiB6e.png" alt="1" /></a></p>
  <h1>2: <strong>index.php</strong></h1>
  <p><a href="https://i.stack.imgur.com/69RsJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69RsJ.png" alt="2" /></a></p>
  <p><em>(After converting the index.html to index.php and removing header and footer parts for making a Wordpress theme)</em></p>
  <p>But I know where the problem came from. Its because of this javascript file which I tried to load it in <code>index.php</code> via <code>functions.php</code> but it does not work out. I named this file <code>inline.js</code>:</p>
  <pre><code>$(document).ready(function(){
                  init_masonry();
              });
  
              function init_masonry(){
                  var $container = $('.item_container');
                  $container.imagesLoaded( function(){
                      $container.masonry({
                          itemSelector : '.item',
                          &quot;gutter&quot;: 18,
                          isFitWidth: true
                      });
                  });
              }
  
              $(document).ready(function(){
                  $('a[href*=#]:not([href=#])').click(function() {
                      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
                          var target = $(this.hash);
                          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                          if (target.length) {
                              $('html,body').animate({
                                  scrollTop: target.offset().top
                              }, 1000);
                              return false;
                          }
                      }
                  });
              });
  </code></pre>
  <p>And this is the <code>functions.php</code>:</p>
  <pre><code>&lt;?php 
  function catalog(){
      wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
      wp_enqueue_style('style', get_stylesheet_uri());
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ) );
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array( 'jquery' ) );
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/offcanvas.js', array( 'jquery' ) );
      wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/inline.js', array( 'jquery' ) );
  }
  add_action('wp_enqueue_scripts','catalog');
  register_nav_menus(array(
      'primary' =&gt; __('Primary Menu'),
      'footer' =&gt; __('Footer Menu'),
  ));
  ?&gt;
  </code></pre>
  <p>I have enqueued the inline.js script like others but it does not work. I also tried refreshing the page by pressing Ctrl+F5 but nothing changed.</p>
  <p>So do you have any suggestion to this problem ?</p>