The content is not wrapping properly on the right side of the image. It should be aligned against the image with a slight spacing in between.
This is how the bar is supposed to look, and underneath there should be a spacer (line) https://i.sstatic.net/DGIHz.png which will follow style 14 from this link https://codepen.io/ibrahimjabbari/pen/ozinB
I hope someone can assist me with this issue.
Snippet:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
vertical-align: baseline;
outline: none;
}
.container {
margin-left: auto;
margin-right:auto;
display:block;
width: 65%;
}
#statistics_background {
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid;
width: 100%;
-moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
-webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
border-image-slice: 1;
}
.statistics_header {
margin: 15px;
}
.summoners_name {
float: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>
<?php include 'header.php'; ?>
<div class="logo">
<a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>
</div>
<div class="container">
<div id="statistics_background">
<div class="statistics_header">
<img class="summoners_icon clearfix" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=95%C3%9795&w=95&h=95" alt="Summoners Icon">
<div class="summoners_name">
<h3>Summoners Name</h3>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>