You may have to use height or width along with the value you want and !important tacked on. Frameworks and libraries are terrible things to be forced to work with because of the complications they impose.

There are a few ways to render elements, there are many more though

display: inline;/* All elements render on the same line, will wrap. */
display: inline-block;/* All elements render on same line, wrap but width can be set.*/
display: block;/*All elements render on separate lines, width can be set.*/

You can also instead of using height: 200px !important use min-height:

element {display: block; min-height: 200px;}

Be sure to check the browser’s styling information, it will show you what CSS rules overwrite your expectation.

You may also want to take all of the HTML output and wrap it inside the following element to do a test for validity:

<div ></div>

Then save that file with an *.xhtml file extension and open it in a Gecko browser (Waterfox, Firefox, etc) which have a much better XML parser. If there are rendering errors the whole page will break and the browser will tell you what is wrong.

In the mid-2000s there was someone who could not figure out why Safari refused to style everything the same way. After three days…three days he found out he was missing an attribute quote. If he had been using the XML parser instead of the HTML parser he would have discovered it in seconds. Bonus: HTML5 has nothing to do with parsers. My platform is built using the XML parser to serve HTML5 code.

I have this code https://codepen.io/saraLance/pen/LYGevXW

And for some reason Safari is showing the play-button without their height and not showing the margins of the quit-button.

How can I fix this?

div {
  width: auto;
}

.screens {
  background: green;
  height: 100vh;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
}

.screen {
  background: red;
}

.sit-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  overflow: auto;
}

.button-section {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 1rem;
  width: 100%;
}

.play-button {
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  border: 1px solid black;
  text-decoration: none;
  padding: 1rem 1.25rem;
  line-height: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  margin: 1rem;
}

.quit-button {
  color: black;
  text-decoration: none;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid black;
}

<div class="sit-container">
  <div class="screens">
    <div class="screen">
      <div class="button-section">
        <a class="play-button">Play</a>
        <a class="quit-button">Quit</a>
      </div>
    </div>
  </div>
</div>