Search code examples
htmlcsscss-selectors

Inconsistent CSS formatting after making edit to 1 line of text

I made 1 change to my index.html file on my website that I am building. After this change the CSS formatting of the website has changed. While reverting the change and having out of date information on the website's home page would probably correct the issue, I do not understand why changing the content within a <p> tag would mess up the CSS formatting as no tags or other formatting rules were changed.

The only line that was changed in my index.html file:

From:

<p>
    I have a few coding projects I am working on that can be found on my GitHub.  These projects mainly include work in HTML/CSS, JavaScript, and C++.  I have also developed a Discord bot for a server using Python.
</p>

to:

<p>
    I have a few coding projects I am working on that can be found on my GitHub.  These projects mainly include work in HTML/CSS, JavaScript, and C++.
</p>

What am I doing wrong?

For code reference/review my repo can be found here.

Additionally, as a TL;DR here is the contents of my CSS file.

css/global.css

/*Body parameters*/
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #D9D9D9;
    justify-content: center;
    margin: auto;
    width: auto;
    clear: both;
}

/* Site Version */
.siteVersion {
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
}

/* Content formatting */
.content {
    position: flex;
    padding: 10px;
    align-content: center;
    margin: auto;
    max-width: 80%;
    background-color: #E6E6E6;
    padding: 20px;
    overflow-y: auto;
}

.grid-container {
    display: grid;
    grid-gap: 5px;
    max-width: auto;
    margin: auto;
    background-color: #E6E6E6;
    align-content: center;
    height: 100%;
    clear: both;
}

.profilePicture {
    float: left;
    margin: 10px;
    height: 165px;
    width: 200px;
}

/* Paragraph */
.paragraph {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    margin: auto;
    word-wrap: break-word;
    white-space: pre-line;
}

/* Hyperlinks */
.email {
    font-family: monospace;
    text-decoration: none;
}

.hyperlink {
    text-decoration: none;
}

I have done the following to try to troubleshoot the issue:

  • Removed some weird content discovered at the end of my file that did not belong
  • Compared with other pages using the css/global.css file and found no styling or formatting issues
  • Checked the file using my local machine and the index.html file displays without issue
  • I have restarted apache2 using command systemctl restart apache2 in attempt to clear the cache
  • I have cleared the cache on my browser
  • I have checked that the other pages on my site are using the same CSS file and have confirmed no differences between the pages

If anyone is adept at CSS I would appreciate the review and any suggestions as nothing has helped resolve the issue

Solution

  • I am going to answer my own question.

    I reverted my change and then removed that sentence again. This resolved the issue and I was not sure why until I checked my Github and discovered that when I reverted and then pushed my change that the <body> element received a change that included the CSS class with the formatting I needed.

    I am not sure why this was missing in my original push, especially with the website functioning normally on my local machine.