Center text between two divs - html

Question

I'm trying to center a text between two floating divs. The problem is, that the text does not center properly, even though I followed every step I could find online.
Here's the code I used to try to accomplish my goal:
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
<div className="EditingApp">
<div className="EditingApp-head">
<div className="EditingApp-head-logo">
<img src={logo} className="EditingApp-head-logo-image" alt="logo" />
<p className="EditingApp-head-logo-text">SyncPad</p>
</div>
<div className="EditingApp-head-end" />
<p className="EditingApp-head-title">Title</p>
</div>
<div>
<p style={{textAlign: "center"}}>center</p>
</div>
</div>
The text 'Title' centers slightly to the right, so it somehow ignores the right div.
Does anyone see the problem?

Answer 1

Put <center></center> around your paragraph and if i understand well it will help.

Answer 2

After some playing around, I got it to work. Thanks to all who tried to help me. Here's the final CSS:
.EditingApp-head {
background-color: #222;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
}
.EditingApp-head-logo-text {
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}

Answer 3

It's because of the floated content. The inline content in your p is going to wrap around the floated content, which will offset it depending on the width of the floated content. To center the title p, apply margin: 0 10% so that the inline content in the p isn't affected by the surrounding floated content.
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
width: 80%;
float: left;
}
<div class="EditingApp">
<div class="EditingApp-head">
<div class="EditingApp-head-logo">
<img src={logo} class="EditingApp-head-logo-image" alt="logo" />
<p class="EditingApp-head-logo-text">SyncPad</p>
</div>
<p class="EditingApp-head-title">Title</p>
</div>
</div>