Discovering the file/s relevant to a specific part of a webpage - html

Question

I have a website, which you can see here: Minutify.
The website is based on wordpress, and I have installed a number of widgets. One of them is for visitors to enter their email. You can see it on the right hand of the main page in a box that is called "SUBSCRIBE TO MINUTIFY".
As it can be seen, the box to enter the email is narrower than the outer white box. You can see that there are two vertical border lines in the middle of the white box (SUBSCRIBE TO MINUTIFY), which is visually unpleasant.
As I don't have any experience with we the website design, and css, html, etc. I am wondering what is a good way to find what file/s control the visual effects of the webpage, for example the box that I am talking about and how to fix the issue I am talking about in the files.
For example, if I write click on the page and choose "View page source" (in chrome) can I get a clue on what files should I look at and where?

Answer 1

As others have said, it's fairly easy to inspect the element and see what CSS is applied. In this case, there is no explicit width set--the browser's default is in effect. It appears as though the CSS for the site is being combined and cached, so the inspector may not be reporting the file you'd edit to make changes. Look for a CSS file in your template directory.
I'd apply a width to that element with the following CSS, included in almost any CSS file that's available to you:
.sml_emailinput {
width: 100%;
box-sizing: border-box;
border: none;
}
This makes the input element the full width of the available space, resulting in a more integrated appearance.
To give that widget an appearance resembling that of the search box above, try this:
p.sml_email {
background: #d0d0d0;
padding-bottom: 20px !important;
}
input.sml_emailinput {
width: 93%;
}

Answer 2

You can use Firebug or inspector Element.
right click on the element you want to see the Style and choose inspector element or Firebug tool(which you can get from internet free)
as i can see you can easily hide it using editing http://www.minutify.com/wp-content/themes/Zoren/A.style.css,qver=4.1.pagespeed.cf.aQXaS7GeSC.css file
input[type="text"], input[type="email"], textarea{
edit border: 1px solid #ccc; into border: 1px solid #fff;