Currently, I'm in the process of developing a website and attempting to build the client-side without using any frameworks. However, for some reason, I am facing difficulty in changing the margin-bottom property. My goal is to create space between the h1, h3, h4, h5, and p elements. I have also incorporated Eric Meyer's reset.
index.html
<body>
<header class="container">
<h1><a href="index.html">Jack's Music Portfolio</a></h1>
<a href="aboutme.html">
<h3>Some Header</h3>
</a>
<nav>
<a href="index.html">Home</a>
<a href="aboutme.html">About Me</a>
<a href="popularlyrics.html">Popular Lyrics</a>
<a href="songstories.html">Song Stories</a>
<a href="contactme.html">Contact Me</a>
</nav>
</header>
<section class="container">
<h3>Driven to write music that brings <em>impact</em>.</h3>
<p>Curabitur ut tempus enim. <strong>Introduce the Portfolio here</strong>. Nullam eget efficitur massa, nec imperdiet turpis. Nulla facilisi. Nunc faucibus lectus non cursus fermentum. Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus. Nulla facilisis nisi est, et rutrum ligula dictum vitae.</p>
<a href="contactme.html">Contact Me</a>
</section>
<section class="container">
<section>
<h5>Songs</h5>
<h3>Song#1</h3>
<p>Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus.</p>
<h3>Song#2</h3>
<p>Cras venenatis, urna sed fermentum gravida, enim lacus fringilla dolor, in cursus arcu diam id lectus.</p>
</section>
</section>
<footer class="container">
<nav>
<a href="index.html">Home</a>
<a href="aboutme.html">About Me</a>
<a href="popularlyrics.html">Popular Lyrics</a>
<a href="songstories.html">Song Stories</a>
<a href="contactme.html">Contact Me</a>
</nav>
<small>© Jack D. MUSIC</small>
</footer>
</body>
main.css
*, *:before, *:after {
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
box-sizing: border-box;
}
.container{
margin: 0 auto;/*top and bottom 0, left and right auto*/
padding-left: 30px;
padding-right: 30px;
width: 960px;
}
h1, h3, h4, h5, p{
margin-bottom: 25px;
}
Any assistance or advice on this matter would be highly appreciated! Thank you!
EDIT I have identified the issue. Strangely enough, when I include the link to the reset.css file in the HTML before the main.css link, it works (and not the other way around). Another workaround is placing the reset CSS code at the beginning of the main.css file before the styling CSS code.