I can't remove the underline from an anchor with a link. Using style="text-decoration:none" doesn't work when I try adding it inline with the element and in the CSS. I believe my problem exists somewhere else in the CSS but I'm not sure.
This is the underline I'm trying to remove
This is the problem HTML with the href link:
I used the CSS reset https://meyerweb.com/eric/tools/css/reset/ at the start of my CSS code.
body {
background: #262d47;
color: #888;
font: 300 16px/22px "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*
================================
Grid
================================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid {
margin: 0 auto;
width: 1196px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
================================
Typography
================================
*/
h1, h3, h4, h5, p {
margin-bottom: 22px;
}
h1, h2, h3, h4 {
color: #92d4cc;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
p {
color: #FFF;
}
/*
========================================
Links
========================================
*/
a {
color: #92d4cc;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
border-bottom: 1px solid #92d4cc;
}
/*
========================================
Buttons
========================================
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid #92d4cc;
padding: 10px 30px;
}
/*
========================================
Primary header
========================================
*/
.logo {
border-top: 4px solid #92d4cc;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
}
.tagline {
margin: 66px 0 22px 0;
text-align: right;
}
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}
/*
========================================
Primary footer
========================================
*/
.primary-footer {
color: #92d4cc;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
}
.primary-footer small {
float: left;
font-weight: 400;
}
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
/*
========================================
Home
========================================
*/
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
.hero h2 {
font-size: 36px;
}
.hero p {
font-size: 24px;
font-weight: 100;
}
.teaser a:hover h3 {
color: #a9b2b9;
}
/*
========================================
About box
========================================
*/
.about {
color: #92d4cc;
text-transform: uppercase;
margin: auto;
font-size: 14px;
}
.marxist {
color: #FFF;
text-decoration: none !important;
}<section class="teaser col-1-3">
<a href="venue.html">
<h5>Venue</h5>
<h3>The beautiful Theater</h3>
</a>
<p>The beautiful historical theater will be our conference venue.<a class="marxist" href="https://www.marxists.org/archive/marx/works/1848/communist-manifesto/">☭</a></p>
</section>