It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework.
<div class="container">
<div class="panel" style="width:width of 33.3333%">
<!-- Content here -->
</div>
<div class="panel" style="width:width of 33.3333%">
<!-- Content here -->
</div>
<div class="panel" style="width:width of 33.3333%">
<!-- Content here -->
</div>
</div>
Even when I try adjusting the width to 25% or 50%, the issue persists as shown in the image below where I have highlighted the mysterious pixel line in red.
This problem arises specifically with the usage of material-ui elements like <gridList>, <GridItem>, and <Cards>.
EDIT
Even attempting a distribution of 33.33 / 33.33 / 33.34 does not resolve the perplexing 1px gap issue!