a search list that floats with varying border widths depending on popularity

Question

I have designed a search page that floats popular "genre searches" to the top, however I can't get the genres to float in the centre as well as sit next to each other at the same time...

http://jsfiddle.net/leeleebefrank/59uYM/

HTML

<div class="Container1">
    <div class="search">
         <h1>Discover</h1> 
        <ul>
             <h3>Search</h3>

            <li class="genre"><a href="#">Genre</a>

            </li>
            <hr class="hr">
            <li class="top"><a href "#">Pop</a>

            </li>
            <li class="top"><a href="#">Electronic</a>

            </li>
            <li class="bottom"><a href="#">Indie Rock</a>

            </li>
            <li class="bottom"><a href="#">Hip Hop</a>

            </li>
        </ul>
    </div>
</div>

CSS

.Container1 {
    background-image:url(../img/bcg_slide-1.jpg);
    background-size: 1920px auto;
    background-repeat:no-repeat;
    background-position:center center;
    width: 100%;
    height:auto;
}
.search {
    background-color:#c44367;
    opacity: 0.6;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0 auto 0 auto;
}
.search h3 {
    text-align:center;
    max-width:25%;
    margin: 0 auto 0 auto;
    color:#FFF;
    border-bottom:none;
}
.search ul li {
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    padding-bottom: 1%;
    padding-top: 1%;
    margin: 0 auto 0 auto;
}
.search ul li a {
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    text-decoration:none;
    margin:0 auto 0 auto;
}
.hr {
    color:#F5BDE2;
    opacity:0.5;
    width:15%;
}
.genre {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:none;
    padding: 1% 10%;
    margin:0 auto 0 auto;
    border-radius:25px;
    width:15%;
}
.genre:hover {
    border:none;
}
.top {
    display:inline-block;
    margin:0.5%;
    border:solid 1px #F5F5F5;
    width: 50%;
    margin:0.5% 15% 0.5% 15%;
}
.bottom {
    display: inline-block;
    border:solid 1px #F5F5F5;
    width: 25%;
    margin:0.5% 15% 0.5% 15%;
}
.top:hover, .bottom:hover {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:solid 1px #F5BDE2;
}

below is the original design

https://i.stack.imgur.com/oyRXs.png

Answer 1

Check this fiddle:

HTML:

<div class="Container1">

    <div class="search">

            <h1>Discover</h1>               

                <ul>
                <h3>Search</h3>
                    <li class="genre"><a href="#">Genre</a></li>
                    <hr class="hr">
                    <li class="top1"><a href"#">Pop</a></li>
                    <li class="top2"><a href="#">Electronic</a></li>
                    <li class="bottom">
                        <a href="#" class="bottom1">Indie Rock</a>
                         <a href="#" class="bottom2">Hip Hop</a>
                        <div class="clearfix"></div>
                    </li>




                </ul>

</div>
</div> 

CSS:

.clearfix { clear: both;}

.Container1 {
    background-image:url(../img/bcg_slide-1.jpg);
    background-size: 1920px auto;
    background-repeat:no-repeat;
    background-position:center center;
    width: 100%;
    height:auto;
    }


.search {
    background-color:#c44367;
    opacity: 0.6;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0 auto 0 auto;
}

.search h3 {
    text-align:center;
    max-width:25%;
    margin: 0 auto 0 auto;
    color:#FFF;
    border-bottom:none;
}

.search ul { text-align: center;}


.search ul li {   
    display: block;
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    margin: 1% auto;


}

.search ul li a{
    display: inline-block;
    width: 100%;
    text-align:center;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#FCFCFC;
    list-style-type: none;
    text-decoration:none;   
    padding: 1%;    

}

.top1, .top2, .bottom a {
    border:solid 1px #F5F5F5;
}

.hr {
    color:#F5BDE2;
    opacity:0.5;
    width:15%;
}

.genre{

    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;
    border:none;
    padding: 1% 10%;
    margin:0 auto 0 auto;
    border-radius:25px;
    width:15%;
}

.genre:hover {
    border:none;
}

.bottom {
    width:50%;
}

.search ul li a.bottom1 {       
    width: 30%; 
    float: left; 
    }

.search ul li a.bottom2 {       
    width: 60%;
    float: right;
    }

.top1 {
    width: 30%;
}

.top2 {
    width: 50%;
}

li a:hover {
    background-color:#F5BDE2;
    text-align:center;
    color:#FFFFFF;  
}

Answer 2

It's not exactly clear what you're trying to do, but if you're trying to align the genre items on a single row and center that row, have a look at this:

http://jsfiddle.net/59uYM/3/

The simplest part here is text-align: center; applied to the parent div, forcing the ul to be horizontally centered.

If this isn't what you're after can you elaborate?