Stron Internetowa || Bohaterowie World of Warcraft

pytanie zadane 19 listopada 2017 w HTML i CSS przez Einstein21 Obywatel (1,420 p.)
zamknięte 19 listopada 2017 przez Einstein21

Witam

Robię stronę o bohaterach universum WoW-a. Moim założeniem było aby górne 150px było nawigacją pomiędzy bohaterami dwóch frakcji. Planowałem również aby po obu stronach bordera były loga tych frakcji. Otóż mimo usilnych prób nie potrafię takowego efektu osiągnąć.

oto kod:

HTML

<div class="navi">
            
            <div class="alliance">
                <h1>Bochaterowie Przymierza</h1>
                <img src="img/150px/alliance.png" id="minilogoA">
                <div style="clear:both"></div>
            </div>
            <img src="img/border.png" id="border">
            <div class="horde"> 
                <img src="img/150px/horde.png" id="minilogoH"> 
            </div>

            <div style="clear:both"></div>
 </div>

CSS

.navi
{
    
    height: 150px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0;
    margin-left: 0;
}

.alliance
{
    width: 49.95%;
    height: 150px;
    float: left;
    background-color: black;
    
}

#border
{
    float: left;
    width: 0.1%;
    height: 150px;
}

.horde
{
    width: 49.95%;
    height: 150px;
    float: left;
    background-color: black;
    
}

#minilogoA
{
    float: left;   
   margin-left:105px;
}

Zaznaczam że nie liczę na gotową odpowiedź. Chciałbym się dowiedzieć jakimi drogami można osiągnąć zamierzony cel.

EDIT1:

Zdjęcia mają wymiary 150px X 150px

komentarz zamknięcia: Problem rozwiązany