Help Flexbox justify Content not loading

[felnsoft]

I’m currently working on my website and I’m running into a problem. In my code, I set justify-content to Space around. When I check to see that it works in Vs Code with live server it works. I upload the CSS to my webserver but when I load the page and look at dev tools, it’s saying justify-content is set to Space between. I tested the live site on Chrome, Firefox, Safari, and mobile equivalent. and they all do the same. I’ve tried deleting all files on the server and reuploaded all files, I’ve also redone the whole site from scratch and nothing is changing. Everything else I can see works fine. I believe it’s being overridden somehow but I don’t know how that’s happening. My website address is Fel-N-Soft
Here’s My whole CSS File

 /* Reset */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Main Styling */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f4f4;
  color: #333;
  line-height: 1.5;  
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

p {
    margin: 10px 0;
}

img {
    width: 100%;
}

/* Utility */
.text-primary {
    color: #b30000;
}

.text-secondary {
    color: #ffff00;
}

/* Navbar */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;  /* Heres the problem */
    background-image: linear-gradient(to right, #000, #b30000);
    color: #f4f4f4;
    opacity: 0.9;
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    padding: 0 30px;
    z-index: 15;
    transition: 0.5s;
}

.top-nav .nav-links {
    color: #f4f4f4;
    padding: 10px 20px;
    margin: 0 5px;
    transition: 0.5s;
    border-right: #ffff00 solid 1px;
    z-index: 11;
}

.top-nav .nav-links:last-child {
    border-right: none;
}

.top-nav .nav-links a {
    color: #f4f4f4;
}

.top-nav .nav-links:hover,
.top-nav .nav-links a:hover {
    color: #ffff00 ;
}

.top-nav ul {
    display: flex;
}

.top-.nav .logo {
    font-weight: 400;
}

.top-nav .nav-links .active {
    color: #ffff00;
}

/* News Section */
.news {
    background: url('../img/fsbg.png')no-repeat center center/contain;
    height: 100vh;
    position: relative; 
}

.news .news-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    height: 100%;
    padding: 20px;
    color: #f4f4f4;
}

.news .news-content h1 {
    font-size: 45px;
    margin-top: 80px;
}

.news .news-content p {
    font-size: 22px;
    max-width: 600px;
    margin: 20px 30px;
}

.news .news-content h1, .news .news-content p {
    z-index: 5;
}

.news::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 0, 0, 0.6);

}

Thanks you

[Roma]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[Roma]

When I view your source I’m not seeing justify-content: space-around; like you said you set it to, or justify-content; space-between; which you say you’re seeing.

What I’m seeing is justify-content; flex-start;

[felnsoft]

That’s weird Because It’s saying something totally different. I just reverted back to an earlier version and it’s working fine now. I don’t know why it was doing that