Issues removing text decoration from links in a custom block I'm replacing the Bartik menu with a custom one. To do this, I'm building a custom block and placing it appropriately. 

That all works. However, I am having issues with Text Decoration: No matter what I try, I cannot remove the line from under links, and I have also noticed a "Doubled/offset" text look. When I edit the code on 'Tryit', everything looks fine; when I unclick 'source' in the block editor, everything also looks fine. 

When I update the page, I see these issues.

My entire block code is the following one.

&lt;style type="text/css"&gt;body {margin:0;}
    ul.topnav {
      font-weight: normal;
      text_decoration: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    ul.topnav li {
      display: inline-block;
    }

    ul.topnav li a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 17px;
    }       

   ul.topnav li a:hover {background-color: #555;}

   ul.topnav li.icon {display: none;}

   @media screen and (max-width:680px) {
     ul.topnav li {display: none;}
     ul.topnav li.icon {
        display: inline-block;
      }
    }

    @media screen and (max-width:680px) {
      ul.topnav.responsive {position: relative;}
      ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      ul.topnav.responsive li {
        float: none;
        display: inline;
      }
      ul.topnav.responsive li a {
        display: block;
        text-align: left;
      }
    }
    &lt;/style&gt;
    &lt;ul class="topnav" id="myTopnav"&gt;
        &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#gallery"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#extra"&gt;Extra&lt;/a&gt;&lt;/li&gt;
        &lt;li class="icon"&gt;&lt;a href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;"&gt;☰ Menu ☰&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;script&gt;
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    &lt;/script&gt;


Here is an image of the issue:



Notice both the underline, and the 'Doubled text'? Thats what Im trying to get rid of. Thank you in advance.
For the text-decoration, try to use !important attribute.

For that "doubled text", you need to use text-shadow: none.

If text-decoration still doesn't work, you can try border-bottom: none for that line, too.