مبتدی: مشکل در کوچک کردن سایز بروز و به هم ریختن ستون

سلام من یه هدر ساده طبق اموزش های تصویری همین سایت ایجاد کردم، ولی وقتی قسمت عنوان سایت رو توی یه ستون 8 تایی میذارم میخوام یه قسمت 4تایی باشه که یه ul گذاشتم توش....خب حالا وقتی صفحمو کوچیک میکنم عنوان سایت درست عمل میکنه ولی قسمت ul زیر هم قرار میگیره...حتی از دستور mediaبرای کوچک کردن فونت هم استفاده میکنم ولی بازم به هم ریخته میفته زیر هم ، میشه راهنماییم کنید؟



<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>control panel</title>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="js/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap -->



    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

            <link rel="stylesheet" type="text/css" href="css/mystyle.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body >

    <!------------ header-------------->

     <div class="container-fluid header">

        <div class="container">

          <div class="row">

                 <div class="col-md-4 col-xs-4 col-sm-4 head-title">

                           <ul class="head-ul">

                               <li ><a href="#" ><span class=" glyphicon glyphicon-home head-span">

                               </span>خانه</a> </li>

                               <li><a href="#" > <span class=" glyphicon glyphicon-envelope head-span">

                               </span>پیام ها</a> </li>

                               <li><a href="#" > <span class=" glyphicon glyphicon-plus head-span">

                               </span>تازه ها</a></li>

                          </ul>

                      

                 </div> 

                 <div class="col-md-offset-3  col-xs-offset-3 col-sm-offset-3 head-title">

                     <h1> My Content Managment System</h1>

                     <h5> سیستم مدیرت محتوای من </h5>

                 </div> 

           </div>

        </div>      

      </div>

        <!------------ end of header-------------->

        <!------------ site container------------->

        <div class= "container" >

            <div class="row menue  ">

                <div class="col-md-12 col-xs-12 col-sm-12 ">

                

                  <ul class="menue-ul" >

                     <li>درباره CMS

                     </li>

                      <li>امکانات

                     </li>

                      <li>راهنما

                     </li>

                      <li>تنظیمات صفحه

                     </li>

                  </ul>

                    

                </div>



            </div>

               

        </div>

         <!------------ end of site container-------------> 



  </body>

</html>