Hyperlink image link boundary

I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.

On other sites I have not had this issues so I am not sure what is going on

Thanks

 <head>
    <link rel="stylesheet" type="text/css" href="assets/style.css" />
    <link href="assets/hover.css" rel="stylesheet" media="all">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>NolanD</title>
</head>
<body>
    <div id="nav">
        <header>
            <div class="logo">NolanD</div>
            <div id="logo">
            </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="Portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </header>
    </div>
    <body>
        <div class="rowone">
        </div>
        <div class="rowtwo">
            <p>
            </p>
        </div>
        <div class="rowthree">
        </div>
        </div>
        <div class="rowfour">
        </div>
        <div class="rowfive">
        </div>
        <div class="rowsix">
            <a href="https://twitter.com/NolanD><img src=" assets/images/twitter.png " height="24 " width="24 " border="0 " class="hvr-bounce-in "> </a>
        <img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
        <img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
      </div>
      </body>
And the CSS, where I think the issues is coming from.
            html, body {
                   margin:0;
                  padding:0;
            }
            * {
              margin: 0;
              padding:0;
             }
                   #nav {position:absolute;
                        width:100%;
                      height: 60px;
                       background:#F4F2F2 ;
                       text-align: right; left: 0; top: 0;   }  
                   #nav  a {  font-size:26px; padding: 3px; margin-right:    1rem;   font-family: Roboto;
                      font-weight:100;    }
                    #nav li  {  display: inline-block;    }
                  #nav h1 { text-align: left;  }
                a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s;  }
               .logo {
              float: left;
            color: #1D7090;
             font-size: 26px;
              font-family: Roboto;
              font-weight:100; 
               line-height: 31px;
             display: inline-block;
              margin-left: 1rem;
       }
                      body { 
                  background-color:#6A6262;
                    }
                .rowone {
    background-color:#7DB3BF;
    width: 100%;
    height: 600px;                               }
                 .rowtwo {
    text-align: center;
    font-size:72px;
    color:#000000; 
    padding-top: 1rem;
    background-color:#F9F2F2;
    width: 100%;
    height: 540px;  
                 }
             .rowthree {
    background-color:#B34042;
    width: 100%;
    height: 500px;  
           }
             .rowfour {
    background-color:#FF5700;
    width: 100%;
    height: 500px;  
          }
            .rowfive {
    background-color:#DDD39B;
    width: 100%;
    height: 500px;  
              }
              .rowsix{
    background-color:#3E3E3E;
    width: 100%;
    height: 175px;
    text-align:center;
    }   
            .rowsix img { display: block;
    padding-top: 5rem;
    text-align:center;
    display:inline-block;
    margin:5px 15px;        
              }
         @media all and (max-width:600px) {
         .logo { display:none; }
         #nav {text-align: center; }
         }

Answers


Try remove padding attribute you added for link at line :

 a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s;  }

Btw : please reformat your code. It's to bad :(


Need Your Help

Where is the xUnit.net help file?

xunit.net

On the xUnit.net web site, they mention a .CHM help file. Where can I find this file?

In need of JPEG test images with exif thumbnaill in none-compressed TIFF format

testing jpeg thumbnails exif

I know most (>>99%?) JPEG thumbnails embedded in APP1 EXIF are JPEG compressed (Still in TIFF format). But there is the possibility of a none-compressed TIFF format thumbnail. The problem is I just

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.