CSS formatting issues, divs moving each other and divs not centering - html

Question

Basically I have this title that says testing. On large screens it isn't centered, and is moved to the right. I want it to be centered, but I can't get it centered. On smaller screens it is to the right of the images and pushing them left, keeping nothing centered. In all cases I want it to be below the images and centered in the page. Thanks.
I keep trying aligns, floats, widths, and margins/ padding but nothing works.
<div class="primary-content">
<span class="title">FTC TEAM 4466</span>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<span class="title">testing</span>
<h1>4466</h1>
<span class="egg"> <p>
egg
</p></span>
</div><!-- End -->
</div><!-- End .primary-content -->
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
I though that the div being below the other ones in the code would do it, but it just doesn't. I think the issue on big screens may be that .bot and .pod are different heights, but I dob't know how to make them equal as it changes as the page gets smaller and bigger. I don't know why my issue is happening for the small screens (under 1300px width).
Thanks again.

Answer 1

set display to flex and add justify.content:center to the CSS properties of the div you are trying to center.

Answer 2

this could happen because you are using an tag in the title,
span tags can not get centered, change this for an h1 tag or another

Answer 3

I did some changes to your code and this is what I came up with:
Feel free to use it
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 4rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
<div class="primary-content">
<h2>FTC TEAM 4466</h2>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<h2>testing</h2>
<h2>4466</h2>
<p>egg</p>
</div><!-- End -->
</div><!-- End .primary-content -->