What am I doing wrong in my CSS? I do not want page break after h1. Thanks.

CSS

h1, h2, h3, h4 {
hyphens: auto;
page-break-after:avoid;
color: #221f20;
font-variant: small-caps;
font-family: 'Garamond Premier Pro', Arial;
padding: 0;
margin-top: 15px;
margin-bottom: 0;
}
h1{
border-top: 4px solid #e6e7e9;
display: inline-block;
}

HTML
<p>Long paragraph</p>
<h1> K-12 Proposition</h1>
<p>Another paragraph</p>

The page break properties don't apply to inline elements, so it's the inline-block declaration that is probably causing the trouble here.

I see. I need to have the border above and the same width as the heading text but not longer. How do I keep both, fit border and avoid break after?

You could add a span inside the h1 around the content, or you could use "display: table" perhaps?

"display: table" works great. You're awesome! Thanks.