@media screen not working

@media screen not working

I have difficulties with changin styles for links inside row of Foundation
Framework 4. This is my code:
<div class="row career-nav">
<div class="large-1 columns text-left"><h3><a href="{{
path('job_offer_list')}}">All</a> </h3></div>
<div class="large-2 columns text-left"><h3><a href="{{
path('job_offer_listgroup',{'type':"Students"})}}">Students</a></h3></div>
<div class="large-3 columns text-left"><h3><a href="{{
path('job_offer_listgroup',{'type':"Young
Professionals"})}}">Young Professionals</a></h3></div>
<div class="large-6 columns text-left"><h3><a href="{{
path('job_offer_listgroup',{'type':"Professionals"})}}">Professionals</a></h3></div>
</div>
and CSS settings:
.career-nav a:link{
color:#58595B;
}
@media only screen and (min-width: 48em) {
.columns.text-left a:link {color:#58595B;}
}
First I tried to solve the problem with CSS settings, created new div
class after div "row", with the name ".career-nav", but it didnt work,
then I commented that and started to write mediaqueries. But as I am new
in Foundation Framework I am not sure that I did the right query,
therefore I want to know, which method is the best one for such
adjustement and what I missed in my code. Thank you!