Can't change margin for a link elements in Bourbon / Neat / Bitters SCSS Rails installation [duplicate] - ruby-on-rails

Question

This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 7 years ago.
I'm trying to make what I thought would be a minor change to the CSS / SCSS in Bourbon in my Rails 4 website.
I'm simply trying to create more margin between my submit button and the "go back" link. At the moment the two elements are too close together as shown in the image below:
I've tried to solve this in a number of ways, both using my own standalone style sheet and within the Bourbon "source code" itself.
First I attached this class and tried this in my own plain app.css file, but element only shifted right slightly, no top margin:
.go-back-link {
margin: 20px 20px 20px 20px;
}
Then in Bourbon's _typography.scss file I tried adding margin to the a section, again no result:
a {
#include transition(color 0.1s linear);
color: $base-link-color;
text-decoration: none;
margin: 20px;
&:hover {
color: $hover-link-color;
}
&:active, &:focus {
color: $hover-link-color;
outline: none;
}
}
Third in _variables.scss I tried changing the line height property from 1.5 to 2, but this changed everything else on the page but has nothing to do with the a link element:
// Line height
$base-line-height: 1.5;
$header-line-height: 1.25;
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!

Answer 1

try using !important, for example :
margin: 20px !important;

Answer 2

As highlighted by #cinnamon this has little to nothing to do with Neat/Bourbon/Sass/Rails while more to CSS.
Clearly I'm missing something fundamental here, so any nudges in the right direction would be greatly appreciated!
Indeed.
You're currently trying to style an inline element, such as an anchor.
For more information, I'd strongly suggest reading the visual formatting model of CSS 2.1 which is quite comprehensive.
In order to solve this problem of yours you need to change the display mode of your anchor, which will then bring in the needed spacing you're requiring.
I'd also suggest to target the element with its own class, rather than using the generic global selector.