title: CSS buttons is unclickable depending on the size and margin (mobile)
body: <p>Currently, I'm making a responsive website from desktop to mobile. I'm focusing now in doing the mobile but then encountered a problem, which is my css buttons. For some reasons they can be clicked in some format but can't be on the size and margin format I want. Also, I didn't encounter this when doing it the normal screen size. Anyone have a solution for making it clickable for the size I want?</p>
  
  <p>Here is the CSS:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.article.container {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: white;
    justify-content: center;
    align-items: center;
  }
  
  .flex.container.parent {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: all;
      text-align: center;
      align-items: center;
      vertical-align: middle;
  }
  
  .tab-selections {
      width: 29%;
      background-color: rgb(242, 242, 242);
      height: 200%;
      display: flex;
      margin: 0em;
      color: rgb(75, 75, 75);
      font-size: 15px;
      text-decoration: none;
      margin-left: 1em;
      border-left: 0.6em solid;
      border-left-color: transparent;
      justify-content: center;
      text-align: center;
      align-items: center;
      vertical-align: middle;
  }
  
  .tab-selections:hover {
      background-color: rgb(205, 221, 255);
      color: rgb(75, 75, 75);
  }
  
  .active {
      display: flex;
      background-color: rgb(205, 221, 255);
      border-left: .6em solid;
      border-left-color: rgb(87, 0, 255);
      text-align: center;
  }
  
  /* for Mobile */
    @media screen and (max-width: 540px) {
      .article.container {
          padding: 0em;
          flex-wrap: wrap;
      }
  
      .flex.container.parent {
          flex-direction: row;
      }
  
      .tab-selections {
          height: 30%;
          width: 100%;
          margin-left: 0em;
          margin-top: 1em;
      }
   }
  </code></pre>
  
  <p>Here is the HTML (ReactJS):</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;BrowserRouter&gt;
      &lt;div className="article container"&gt;
        &lt;div className="flex container parent"&gt;
          &lt;NavLink className="tab-selections" to="/sample/article"&gt;
            ARTICLES
          &lt;/NavLink&gt;
          &lt;NavLink className="tab-selections" to="/sample/casestudies"&gt;
            CASE STUDIES /&lt;br /&gt;
            WHITE PAPERS
          &lt;/NavLink&gt;
          &lt;NavLink className="tab-selections" to="/sample/news"&gt;
            NEWS/EVENTS
          &lt;/NavLink&gt;
        &lt;/div&gt;
        &lt;div className="a-content-flex"&gt;
          &lt;div&gt;
            &lt;Route
              exact
              path="/sample/article"
              component={InsightHomeSummaryArticles}
            /&gt;
            &lt;Route path="/sample/casestudies" component={CaseStudies} /&gt;
            &lt;Route path="/sample/news" component={News} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/BrowserRouter&gt;
  </code></pre>