I cannot apply display: none to ul - html

Question

I have an ul element (one of three on the page) that I don't want to be shown on mobile devices. I'm trying to apply display: none; to it but it doesn't work.
The code isn't mine, I just used a template from the internet, so go easy on me, plz
Html part
<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1>This the title</h1>
</header>
<div class="content">
<p> and some text here </p>
<ul class="actions">
<li>A button</li>
</ul>
</div>
</div>
</section>
What I have in CSS
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
ul.actions are used for different buttons throughout the page: one that I showed you in the html part and two other buttons to fill out a form.
So, I'm adding this bit of code but it just won't work
#media screen and (max-width: 480px) {
#banner .actions {
display: none;
}
}

Answer 1

You have used this code in wrong CSS file.
Please use right approch:
Your mentioned URL have this CSS
https://html5up.net/uploads/demos/forty/assets/css/main.css
The media query #media screen and (max-width: 480px) is mentioned in this css. Please go there
Please use this bit of code in this media query
#banner .actions {
display: none;
}

Answer 2

The code seems to work fine, I am not sure if you opened the page on the mentioned browsers before doing some code editing. In that case, clearing the caches could help.

Answer 3

That code works fine.
If this is not work fine on you site It seems like any other declaration overriding this declarations.
When an important rule is used on a style declaration, this declaration overrides any other declarations.
Please use CSS rule with !important and check after Clear your cache.
#media screen and (max-width: 480px) {
#banner .actions {
display: none !important;
}
}