Time for action—adjusting the header layout

So, let’s get started on the header. To adjust the header layout, perform the following steps:

1. 1. First, let’s find any existing CSS relating to the header layout in our media query for screens of 480px width or less. The following code is the one we are looking for:

   /*tidy up the header*/
   #site-title img {
   width: 75%;
   }
   #header-right address h2 {
   font-size: 1.3em;
   margin-top: -0.2em;
   }
   #header-right #socialmedia img {
   height: 20px;
   margin: 5px 1% 0 0;
   }
   #header-right .CTA {
   width: 130%;
   font-size: 16px;
   padding: 0.8em 0.8em 0.8em 40px;
   margin: 20px 3% 5px 0;
   }
   #header-right .CTA img {
   width: 15%;
   }
   

2. 2. We need to add some new styling to adjust the layout. The following code adds it:

   /* header layout for responsive web app */
   #site-title {
   width: 100%;
   }
   #site-title img {
   width: 30%;
   }
   #site-description {
   position: relative;
   float: right;
   width: 60%;
   text-align: right;
   left: 0;
   }
   #header-right {
   width: 100%;
   clear: both;
   margin-top: 10px;
   }
   #header...