Header element alignment in html page

I'm trying to align my header element and I'm not able to align in the way I want. I tried bringing the university of Bentaucur right below UOB in header block, But either it's coming side to UOB or way below it. Can someone tell where I'm doing wrong.

This is my code.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f1f1f1;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    a,
    a:hover {
      text-decoration: none;
      float: left;
      font-family: Impact, Charcoal, sans-serif;
    }
    
    #home,
    #phone {
      float: right;
    }
    
    #headname {
      float: left;
      font-family: "Comic Sans MS", cursive, sans-serif;
    }
    
    #home {
      padding-right: 10px;
    }
    
    #king {
      padding-left: 10px;
    }
    
    .head {
      background-color: #174e80;
    }
  </style>
</head>

<body>

  <header class="w3-container head">
    <h2>
      <a id="gly" href="kuchbhi.html" style="color:#f2f2f2">
        <span style="float:left;">UOB</span>
        <p style="float:left;" id="king"><span class="glyphicon glyphicon-education"></span></p>

      </a>

      <p id="phone" style="padding-right:30px;padding-top:10px;color:#f2f2f2"><span class="glyphicon glyphicon-earphone"></span></p>
      <p id="home" style="padding-right:30px;padding-top:10px;color:#f2f2f2"><span class="glyphicon glyphicon-home"></span></p>
    </h2>
    <br>
    <br>
    <p id="headname" style="font-size:12px; padding-left:6px;color:#f2f2f2">University of Bentaucur</p>

    <br>

  </header>

</body>

</html>

In Header element, I need to get the <p> element University of Bangalore under the line UOB.

The <p> element leaves some space on the start of the line

Solution

If you add clear: left; to the <p> in question, the desired text will not be displayed on the page until it has cleared all elements that would normally appear to the left of the <p>.

<p id="headname" style="font-size:12px; padding-left:6px;color:#f2f2f2; clear:left;">University of Bentaucur</p>