Margins Prevent Text Align;

(If there is a simpler solution to this problem, please tell me)

I want this website to have 2 sections of text, one on each side of the screen.

I did this successfully. I used text align and translate3d to move the text to the right, then up.

The only problem was that the width of the the text on the right blocked the text on the left from being interacted with.

I decided to change the width of the text on the right side, and when I did, the text alignment wasn't working, because of the margins (the inspect said margins).

I decided to change the margins to 0, and nothing happened.

I have no idea why, but here is some code:

.mid{
  margin: 0px 0px 0px 0px;
  font-family:myfont;
  font-size:150px;
}

.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}

</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>

I later added this, but still nothing happened:

#calculator{
margin: 0 !important;
}

So, is there any possible way to have text on both sides of the screen at the same time, with them being separate from each other?

Or is there a way to COMPLETELY remove margins?

Solution

.mid {
  margin: 0;
  font-family: myfont;
  font-size: 50px;
  float: left;
  width: 50%;
}
.mid:nth-child(even) {
  text-align: right;
}

<div id="midwlink">
  <p id="games" class="mid">Games</p>
  <p id="calculators" class="mid">Calculators</p>
  <p id="animations" class="mid">Animations</p>
  <p id="pictures" class="mid">Pictures</p>
</div>