While building my basic HTML site, I encountered an issue with my anchor tags (). They are extending all the way across the screen with a black background, which is part of the footer design.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Under construction</title>
<link rel="stylesheet" style="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" style="text/css" href="app/stylesheets/stylesheet.css">
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app/JS/app.js"></script>
</head>
<body>
<div class="container">
<div ng-view>
</div>
</div>
<div id="footerDiv" class="footBackground">
<hr>
<a href="" target="_blank">
<div ng-init="imgsrc ='app/images/linkedin.png'" ng-mouseover="imgsrc='app/images/linkedinHover.png'" ng-mouseout="imgsrc='/app/images/linkedin.png'">
<img ng-src="{{imgsrc}}" width="50" height="50" class="footLinkedIn"></img>
</div><br />
</a>
<a href="" target="_blank"><h5><span>Website created by <br />Adam parker</span></h5></a>
<hr>
</div>
</body>
</html>I have attempted multiple times to address the issue with the extended anchor tag, but so far nothing has worked.
Even after trying to modify the anchor tag using CSS, I still can't seem to resolve the problem. The code snippet is short, and I am puzzled as to why it spans over half of the screen. Any assistance would be greatly appreciated.
PS. I temporarily removed some code for troubleshooting purposes, specifically focusing on fixing the lengthy anchor tag in the footer.