Side by side boxes at 50%, but wanting to put fixed-sized boxes to keep in the center of each?

Question

I'm trying to do is have two boxes, side-by-side, that stay at 50% of the screen width each so that they stay at 50% regardless of the screen width.

However, I'm also trying to put boxes with text inside each of those boxes, but I want the inside boxes completely centered and to remain at a fixed width so that the text doesn't shift around as the screen width changes.

Anyone have any ideas? Seems like a simple thing, but I'm just getting started in CSS, so bear with me.

Answer 1

You can use CSS this way:

   .half-screen{
       box-sizing: border-box;
       display: inline-block;
       width: 50%
    }

And then you do your logic inside those box

Note that you can use vertical-align: top; if you want them to be side by side and have the same starting point

Answer 2

#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}

#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}

#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}

. . .

<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>

Answer 3

A fixed size in the center of two side-by-side boxes:

.container {
  height: 200px;
  width: 300px;
  background-color: lightgray;
  font-size: 0;
}
.box {
  display: inline-block;
  width: 50%;
  height: 100%;
  background-color: dodgerblue;
  position: relative;
  border: solid 1px #222;
  box-sizing: border-box;
}
.subbox {
  height: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: indianred;
}

<div class="container">
  <div class="box box1">
    <div class="centered subbox">
    </div>
  </div>
  <div class="box box2">
    <div class="centered subbox">
    </div>
  </div>
</div>