How to add margins to code blocks in Jekyll?

Question

Currently code blocks on my Jekyll blog look like this:

I want them to have margins on the left like this:

Preferably, I would also like bigger margins on top and bottom.

Is it possible in Jekyll CSS? My current code base is at https://github.com/jjarzynski/jjarzynski.github.io/tree/master/_sass.

Answer 1

Adding display: block; padding: 10px; solved it.

Before:

.highlight code, .highlight pre {
  color:#fdce93;
  background-color:#3f3f3f;
}

After:

.highlight code, .highlight pre {
  color:#fdce93;
  background-color:#3f3f3f;
  display: block;
  padding: 10px;
}