Overriding bottom-margin of h1

[Fatih20]

index.md :

<div class = "Xournal" id = "#Xournal" >
	<h1>Xournal++</h1>
	<p>Xournal++ is a <span class = "bold">cross-platform</span>, <span class = "bold">open source</span>, <span class = "bold">hand-written note-taking</span> software with the target of flexibility, functionality, and speed. It is a modern rewrite and more feature-rich version of the wonderful Xournal program.</p>
</div>

<div class = "features" id = "#features">
    <h1>Features</h1>
    <p>Among all of them that are listed in the User Guide, the most notable and noteworthy are...</p>
    <div class = "feature-list">
    	<div class = "feature">
    		<div class = "feature-text">
    			<h2 class = "feature-title">Hand-write your notes</h2>
    			<ul class = "feature-description">
    			    <li>Support for pressure-sensitive stylus and drawing tablets (Wacom, Huion, XP-Pen, etc.)</li>
    			    <li>Robust pen, highlighters, and eraser tool with a lot of customizability, allowing you to write how you want to write</li>
    			</ul>
    		</div>
    		<img class = "feature-image" src = "img/placeholder-image.png">
    	</div>
    </div>
</div>

home.css (I've added this CSS file to the mkdocs.yml) :

* {
	border: solid 1px black;
}

.Xournal, .features{
	text-align: center;
}

.Xournal h1 {
	font-size: 40px;
}

.Xournal p {
}

.bold {
	font-weight: bold;
}

.features h1 {
	font-size: 36px;
}

/*.features {
	border: solid 1px black;
}

.features p{
	border: solid 1px black;
}

.features h1 {
	border: solid 1px black;
}*/

.feature {
	text-align: left;
}

.feature-text, .feature-image {
	display: inline-block;
}

.feature-text {
	/*border: solid 1px black;*/
	width: 40%;
}

.feature h2{
	/*border: solid 1px black;*/
}

.feature ul {
	/*border: solid 1px black;*/
}

This is how it looks (I purposefully added border to everything to illustrate the issue) :

As you see, between Xournal++ title and its description, there is a margin when it's not specified in the CSS. Same goes for the h1 and p in the features class. More importantly, the feature-title is not vertically-aligned with the feature-text div which makes it look strange. However, if feature-title is changed to h1 from h2, it would be vertically-aligned with the feature-text div.

I can only assume that these margins are coming from the theme (if it's not, please correct me). I'm interested in overriding these, but I can't seem to see any reference to h1 nor h2 specifically in the stylesheet of this theme. Admittedly, I'm a novice in web development, so maybe there's something that I had missed. Any help?

[squidfunk]

All typography is defined in _typeset.scss. For example, here are the styles for a h1:

mkdocs-material/src/assets/stylesheets/main/_typeset.scss

Lines 89 to 97 in 619d47f

	// Headline on level 1
	h1 {
	margin: 0 0 px2em(40px, 32px);
	color: var(--md-default-fg-color--light);
	font-weight: 300;
	font-size: px2em(32px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	}

Note that we use custom functions in SCSS (which transpiles to CSS) like px2em which are not available in CSS. You can use .md-typeset h1 to style the selector, or something similar (matching the specificity of the original definition):

.md-typeset h1 {
  margin-bottom: 0;
}

[Fatih20]

.md-typeset h1 {
  margin-bottom: 0;
}

So do I just need to put this snippet in the additional css or do I need to do follow the step specified here?

[squidfunk]

So do I just need to put this snippet in the additional css

Yes.