Simple character sheet styling confusion

HTML Layout &lt;div class="container"&gt; &nbsp; &lt;div class="background"&gt;&nbsp; &nbsp; &nbsp; &lt;div class="section"&gt; &nbsp; &nbsp; &nbsp; Name: &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_character_name" /&gt; &nbsp; &nbsp; &nbsp; &lt;br/&gt; &nbsp; &nbsp; &nbsp; Level: &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_character_level" /&gt; &nbsp; &nbsp; &nbsp; &lt;br/&gt; &nbsp; &nbsp; &nbsp; XP: &nbsp; &nbsp; &nbsp; &lt;input type="text" name="attr_character_xp" /&gt; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &lt;/div&gt; &lt;/div&gt; CSS Styling .section { &nbsp; &nbsp; line-height: 1; &nbsp; &nbsp; border: 40px solid black; &nbsp; &nbsp; border-image-source: url(<a href="https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494</a>); &nbsp; &nbsp; border-image-slice: 40; } This should show a nice border image and was working (in a more complicated example). This simplified character sheet does not show the border image today. What have I done incorrectly?

In the css, add "sheet-" before the class .&nbsp; See if that works. . sheet- section { &nbsp; &nbsp; line-height: 1; &nbsp; &nbsp; border: 40px solid black; &nbsp; &nbsp; border-image-source: url(<a href="https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/66687670/0BjzR71SiqpYfQwFNghZjQ/max.png?1541882494</a>); &nbsp; &nbsp; border-image-slice: 40; }

Thank you!