Can't place image next to text (pushed into next div)

I want to place an image next to some text inside a div but the image was pushed into the next div below and won't move up no matter how much I increase the margin or padding. I want the center of the image to be where the tip of the arrow is in the picture:

Here's where the image is and where I want it to be

Here's the CSS and HTML:

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
}
   
.round-border{
    border-width: 0px;
    border-style: solid;
    border-radius: 50%;
  }
.portrait-image{
    width: 25%;    
    margin-bottom: 120%;
  }
h9 {
    font-size: 142%;
    margin: auto;
    padding-right: 30%;
    padding-top: 12%;
    display: inline-block;
  
}
.header-bar{
    height: 3px;
    width: 51%;
    background: #272C31;
    margin-right: 23%;
    margin-top: 3%;
}
h10 {
    font-size: 142%;
    margin: auto;
    padding-right: 24%;
    padding-top: 5%;
    display: inline-block;
}
#image position {
  position: relative;
  z-index: 1;
  margin-botton: 40%;
  padding-bottom: 20%;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<style>
img {
    float: right;
}
.clearfix {
    overflow: auto;
}
</style>

<div class="header" id="myHeader">
  <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
</div>

<body style="background-color: #5D6D7E;">
  <div id="about" align="center" position="relative">
    <h9><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </h9>
    <div class="header-bar"></div>
    <h10><p align="right">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </h10>
    <div id="image position"><img class="portrait-image round-border" align="right" src="http://abload.de/img/gpuxh.png" alt="portrait">
    </div>
  </div>
 </body>

Any help would be greatly appreciated, thanks.

Solution

There were many things wrong with your code and I'm not sure where to begin. There are no h9 or h10 header tags. I would suggest using valid header tags and modifying the font-size according to your taste. Also, you can't have a class/id name separated by a space. So, "image position" will not work. Fixed it the best way I could.

.header {
  padding: 10px 16px;
  background: #1919ff;
  color: #f1f1f1;
}

#about {
  background-color: #ccccff;
  height: 400px;
  width: 67%;
  margin: auto;
  box-sizing: border-box;
}

.round-border {
  border-radius: 50%;
}

.portrait-image {
  width: 25%;
}

.header-bar {
  height: 3px;
  width: 51%;
  background: #272C31;
  margin-right: 23%;
  margin-top: 3%;
}

#image-position {
  float: right;
  margin: 15% 5% 0 0;
}

#text {
  float: left;
  width: 57%;
  word-break: break-all;
  margin: 5%;
}
.clearfix {
  /*clear the floats here*/
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<body style="background-color: #5D6D7E;">
  <div class="header" id="myHeader">
    <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxx</h2>
  </div>
  <div id="about" class="clearfix">
    <div id="text">
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
      <div class="header-bar"></div>
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
    <img class="portrait-image round-border" id="image-position" src="http://abload.de/img/gpuxh.png" alt="portrait">
  </div>

</body>