Question: I was working on a Discord Tutorial Site (<http://elix.sap.md/elix/forgive>),
where I had an external CSS file. In Chrome everything worked fine Now when I tried it on Safari, the CSS settings were gone. Where in Chrome you were able to see colorful columns, in Safari only the text.
I have no idea what happened.

This is how it looks in Chrome:  

[![enter image description here](https://i.stack.imgur.com/5QWjy.png)](https://i.stack.imgur.com/5QWjy.png)

And this is how it looks on Safari:  

[![enter image description here](https://i.stack.imgur.com/oLBap.jpg)](https://i.stack.imgur.com/oLBap.jpg)

```css
.uber {
  text-align: center;
}

.column {
  width: calc(50% - 1px);
  text-align: left;
  float: left;
}

.colleft {
  border-right: 1px solid rgb(0, 0, 0);
  background-color: rgb(250, 250, 250)
}
```

```html
<h1 class="uber">Opilite's Discord Tutorial</h1>
<h2 class="uber">Lernen, wie man mit Discord umgeht; auch in unser Klassenserver</h2>
<div class="column colleft">
  <h2 class="uber">Basiswissen</h2>
  <ul>
    <li>Wie beginnt man mit Discord?</li>
  </ul>
</div>
<div class="column">
  <h2 class="uber">Unser Server</h2>
  <ul>
    <li>Was musst du im unserem Server wissen?</li>
  </ul>
</div>
```

Can someone help me?  

Thanks in advance,
Opilite

Answer: 
I have prefixed your CSS using the tool listed below.

After searching through inspect element I've noticed that your styles.css is linked incorrectly.
[![enter image description here](https://i.stack.imgur.com/RwIMX.png)](https://i.stack.imgur.com/RwIMX.png)

Try to make sure your `<link>` in the header points to the right address. If you've done this,

EDIT: I have found out the working path for your css link. See the following screenshot.
[![enter image description here](https://i.stack.imgur.com/B1ZxP.png)](https://i.stack.imgur.com/B1ZxP.png)

```
<link rel="stylesheet" href="forgive/styles.css">

```

If you still can't see the style, paste the following CSS formated with [autoprefixer](https://autoprefixer.github.io/) in the styles.css file to see the results.

```
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 22 version
*/

.uber {
  text-align: center;
}

.column {
  width: -webkit-calc(50% - 1px);
  width: calc(50% - 1px);
  text-align: left;
  float: left;
}

.colleft {
  border-right: 1px solid rgb(0, 0, 0);
  background-color: rgb(250, 250, 250)
}

```

[![enter image description here](https://i.stack.imgur.com/fuzxl.png)](https://i.stack.imgur.com/fuzxl.png)
sometimes older versions of some browsers doesn't support more advanced features so either update your browser or write code the way, that your browser supports it.

doing this will solve all the problems.