HTML Link with Image Not Adjusted - html

Question

I am relatively new to HTML/CSS, and am finding a basic bug in a website that I am attempting to create.
I am using an external CSS file to style my website, and I use the following code as a general guideline for my HTML links.
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
After I link my styles.css file to my HTML file (via link), I want to have a standard logo at the top right corner of the screen, which when clicked, will bring the user to the home screen. However, I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen so the website would look natural on a phone and a computer (rather than being too big/small). I have attempted to do so below, and although the image is in the correct proportions I want it to be, I am still getting an issue when I hover over the label, there seems to be a border that lights up around the image (even though I don't want it to). Here is the code that I used to add the logo:
<a href="index.html" style="float:right; padding:0px 0px;">
<img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>
I am pretty sure that adding the percentages to both the width and height is illegal, right? I'm also curious why this seems to work for the height, but not for the width, and if there is something flawed in doing so please let me know. Here is the output that this code will cause to my logo:
In the above image, I am not hovering over the image with my mouse. The logo is taking up more space than I would like and has a border.
The above image shows my logo when I am hovering over it with my mouse. Notice that the border around it changes color, and if you click in this area, then it will redirect it to the homepage (which is what I want it to do, but I want to minimize the clicking area to just the picture of the logo, not the space surrounding it, and I want to get rid of the border surrounding the logo).

Answer 1

there's a property in CSS called as an outline
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
outline: none;
}
this will remove your border which is highlighting when you hover over it

Answer 2

Your issue is not that clear.
It is best to show your live site or place your code on sites like CodePen or JSFiddle, so others can test to check the issue.
By the way, you can also post your code here as well.

Answer 3

You can try this, but please read what follows: :)
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
border: none; /* <-- add this */
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
From what I see: I suspect the border (and box-shadow ?) to come from a parent node. You can use the inspector of your browser and click on the border to identify the html tag we want and give him the medicine:
{
border: none;
box-shadow: none;
}
I am pretty sure that adding the percentages to both the width and height is illegal, right?
The SWAT won't come at your place, though we tend to avoid that directly in the HTML file.
More, it's better to not put style inside the HTML file itself, as it may override some rules written on your css files. If you don't know about CSS specificity, here is a good read.
Though it's ok on a CSS file. Myself I usually put max-width: 100% to the images, and I change the width and height of it's parent's div as needed.
I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen
This is perfect! Did you know about vw and media queries ?