Delete empty space between <h2> and CSS animation - css

Question

In the following snippet you can see a space between h2 and animation. I want it remove it in my case.How can I do this?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<h2>xyzxyzxyzxyz.
<div class="loader" style="float:right;"></div>
</h2>
JSFIDDLE: https://jsfiddle.net/wdzLv7tk/

Answer 1

Float:right cause the problem. There are so many ways to keep the element side by side. I applied one of them. Here I have display:table for my parent element and for each child it is display:table-cell which gives a solution to your problem.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.parent {
display: table;
margin:auto;
}
.child {
display: table-cell;
}
h2 {}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<div class="parent">
<h2 class="child">xyzxyzxyzxyz.</h2>
<div class="loader child" style=""></div>
</div>

Answer 2

Just use text-align: right instead of text-align: center
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h2 {
text-align: right;
}
<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>