Using custom css – hide minicart

I created a local.css file that works well with this content:

.action.primary.tocart {
    display: none;
}

However, I want to use it to hide the minicart:

<a class="action showcart" href="site here" data-bind="scope: 'minicart_content'"><span class="text">My Cart</span>

This is not working:

.action.showcart {
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
}