css - I need to decrease the size of the header background color -


how can decrease size of header in logo class? logo contains name " pied piepr". background image quite big in header. tried decreasing height attribute didnt work.

style sheet:      body{         margin: 100%;         margin: 0;     }      .container{         position: relative;         height: 50px;         width: 1100px;     }      .masthead{         background: #4fc3f7;         width: 100%;         top: 0;         position: fixed;         color: white;     }      .logo{         position: relative;         float: left;         left: 90px;         font-family: josefin slab;         font-size: 21px;      }      a:link    {color: white;  text-decoration: none; }     a:visited {color: white;  text-decoration: none; }     a:hover   {color: white;  text-decoration: none; }     a:active  {color: white;  text-decoration: none; }      li{         position: relative;         left: 155px;         list-style: none;         font-family: raleway;         float: left;         margin-left: 21px;          padding-top: 20px;         font-size: 20px;     }      .navigation{         float: right;     }  markup"  <!doctype html> <html> <head>     <title> home page</title>     <link href='http://fonts.googleapis.com/css?family=josefin+slab' rel='stylesheet' type='text/css'>      <link rel="stylesheet" type="text/css" href="mainpage.css"> </head> <body>      <div class="masthead">         <div class="container">             <div class="logo"><h1><a href="#">crux</a></h1>             </div>             <div class="navigation">                 <ul>                     <li><a href="#">overview</a></li>                     <li><a href="#">courses</a></li>                     <li><a href="#">institution</a></li>                     <li><a href="#">|| sign in</a></li>                     <li><a href="#">sign up</a></li>                     </ul>              </div>           </div>     </div>     <div class="container">      </div>     <div class="content">         <p> </p>     </div>  </body> </html> 

so h1 hold default margin value have make them 0. add following style css

h1{     margin:0; } 

or

*{     margin:0; } 

note: still find little space on top , bottom thats because of line-height property can reduce them fit logo background-color

demo


Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -