Enabling line numbers adds too much space before codes

[geeknerd]

Line numbers with Rouge has been giving me headaches for a long time and I tried to enable line numbers on this theme, deployed locally, it still gives too much space between the number and the codes. Also the alignment is just way off each other. Looks like Jekyll treats line number and codes as a two column table but I couldn't find a proper way to resize the column in the css file. Anyone has any idea?
To enable the line numbers I edited the _config.yml file

kramdown:
  input:          GFM
  # https://github.com/jekyll/jekyll/pull/4090
  syntax_highlighter: rouge

  # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html
  # span, block element options fall back to global
  syntax_highlighter_opts:
    # Rouge Options › https://github.com/jneen/rouge#full-options
    css_class: 'highlight'
    #line_numbers: true # bad idea, spans don't need linenos and would inherit this option
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

And the result looks like this:

[geeknerd]

I think I found a work-around for this issue. Just need to modify the syntaxhighliting scss file a little bit.
Solution