Time for action – enhancing the header and the navigation appearance with CSS

The steps are as follows:

1. Open main.css.

2. Add some whitespace surrounding the header with padding, and also set the header color to #333, as follows:

   .blog-header {
   padding: 30px 15px;
   background-color: #333;
   }

3. To make the logo look prominent, we will set it with Varela Round font, which is the same font family we used for the headings. We also make it bigger and transform the letters all to uppercase, as follows:

    .blog-name {
     font-family: "Varela Round", Arial, sans-serif;
     font-weight: 400;
     font-size: 42px;
     text-align: center;
     text-transform: uppercase;
   }

4. The logo link color currently is #2a84bf, which is the common color we set for links <a>. This color does not suit well with the background color. Let's change the color to white instead, as follows:

   .blog-name a {
       color: #fff;
   }

5. Set the search input styles, as follows:

   .search-form input {
     height: 36px;
     background-color: #ccc;
     color: #555;
   ...