Unable to adjust the margin-bottom attribute in CSS

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>&copy 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.

Answer №1

the headings already have their own specific styling, so in order to make changes you must use !important to override the existing styles without removing them completely.

  h1, h3, h4, h5, p{
        margin-bottom: 25px !important;

    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

I'm attempting to achieve an icon-swapping effect using jQuery+quicksand. Although it works seamlessly in Chrome, I am encountering issues with IE and Firefox. Given that the more intricate quicksand demos function flawlessly across all browsers, I su ...

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

Ways to automatically refresh my PHP website whenever the content of a text file is updated

A challenge I am facing involves a .php file that currently displays content from a .txt file located on my FTP server onto a webpage. My main issue lies in the fact that I desire to have the .php page automatically refresh whenever new content is added t ...

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...

Add option button

Is there a way to dynamically add radio buttons using jQuery or JavaScript and save the data into a database? I have successfully appended input types such as text, textarea, checkbox, and select with options. Here is my code: <!DOCTYPE html> < ...

Switch up div content - advertisements at the top or bottom

An issue has arisen where the ads on a website are currently being displayed at the bottom of the source code, but they should actually be visible at the top. Here is the ad placeholder code: <div id="300_250_placeholder"></div> And here is ...

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

"Troubleshooting: Issues with jQuery Counter Functionality

Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...

Mastering the art of utilizing particles.js

Particles.js doesn't seem to be functioning properly for me—I'm struggling to pinpoint the issue. Any guidance or suggestions would be greatly welcomed, as I'm unsure whether it's related to an external dependency... HTML: <div ...

Tabbable bootstrap with dropdown functionality

I am currently in the process of integrating Bootstrap tabs and dropdown menus using version 2.3.4 <div class="container"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> ...

Tips for integrating YouTube links into PHP

As someone who is relatively new to PHP, I am currently working on pulling information from an AirTable database and displaying it on a webpage, which I have successfully done. Now, I need to include a video along with the numerical data, with each set of ...

Tips for concentrating on the initial input field produced by an ng-repeat in AngularJS

Currently, I am dynamically generating input fields using ng-repeat and everything is working smoothly. However, my requirement is to set focus on the first input that is generated by this ng-repeat based on their sequenceId values. So far, I have attempte ...

What is the best way to integrate LESS css into a Reactjs application?

I am looking to incorporate LESS into my React app, but I have been unsuccessful in finding a solution through Google. As a newcomer to ReactJs, I lack deep knowledge and would greatly appreciate guidance on installing Less. If anyone is able to help me ...

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes? In the example below, each input should have a width based on its maxlength attribute: <link href="https://cdn.jsdelivr.net/npm/<a href="/cd ...

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

The scrollbar is failing to display the entire content on the right side of the HTML document

I am facing an issue with creating a horizontal scroll bar within a div element that contains all the contents. The problem arises when a user scrolls, as it is not fully scrolled to the end of the right side, making it impossible to see the content at the ...

Exploring the utility of the load_file function in the simple HTML DOM method

After writing this code and it was functioning properly. <?php include ('require/simplehtmldom_1_5/simple_html_dom.php'); echo $html=file_get_html('http://www.site.com'); ?> Now I want to make it work using the object method. He ...

Create copies of Div elements for them to revert back to their original state following

It seems like a simple task, but I'm struggling to figure out how to do it. On a single page, I have multiple divs: <div id="playerid-1"><a href="javascript:loadplayer(1);">[LOAD PLAYER]</a></div> <div id="playerid-2">& ...