To understand where the styles come from, right-click on the element and select "View code" in the menu. The Development Tools browser opens.
These and further instructions are for Chrome because it dominates the browser market today. In other browsers, the inspection course is about the same.
Suppose we decided to inspect the title of the main page of my test site http://test.kagg.eu/
We see that when the tab of the Inspector's Elements with html code opened
<h2 class="entry-title">Home</h2>
On the right are the styles of this element. When you hover on style.css:1903 a hint style.css:1903 with the full url of the style file: http://test.kagg.eu/wp-content/themes/twentyseventeen/style.css . Moreover, the specified line number in css, from which specific styles are taken - 1903. We see that in line 1903 there are declarations of the rule for
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title
Notice that only those styles that are highlighted in black .page .panel-content .entry-title worked for this element. Those that are grayed out are not applicable to this element.
Scrolling down the right style window, you can see which css-properties worked on this element. Crossed properties do not work, they are overlapped in other rules.
In order to understand where this or that property came from this Home element (for example, font-family), right-click on the Computed tab.
We see that Libre Franklin declared in line 418 style.css. You must hover over style.css to find out its full url, since there may be several files with that name.
In this way, you can find out where any css property is declared: the body width or the logo width or anything else.
Regarding your question about the parameter ?ver= in the url of the style file. This is just a version of the file. It is set either explicitly in the subject when calling wp_enqueue_style() , or it takes the value of the WordPress version. From your text it is clear that you have installed the latest version of WordPress 4.9.4.
Why add a version at all? This is important for caching. When you change ?ver= browser will reset the cache of this file, even if it did not change a single byte.
But in general, this is a slightly different topic that needs to be discussed separately. In this question, you can safely ignore ?ver= . And in the inspector of this parameter is not. The inspector displays the current version of the style file.
Update
As for the specific theme of tdPersona, there is nothing confusing about it.
The function code tdpersona_the_custom_logo() is in wp-content/themes/tdpersona/inc/template-tags.php it is very simple, there are 3 lines, it calls the standard WordPress function the_custom_logo() , and that pulls the sizes of the logo from the base, according to the settings in "Appearance-> Customize-> Site Properties-> Logo". Using the instructions above, it is easy to see that the logo image is wrapped in a div with a class .brand . To change the size of the logo, it is enough to add one rule in style.css
.brand img { width: 200px; }
To see the width of the "body of the site, as you call it" (the width of the content, I suppose), you need to point at <header id="masthead" class="site-header container" role="banner"> in the inspector and see the block highlighting
In the bottom right of the styles window we see that the width of the container is specified in the 31st line of the style.css file.
.container { max-width: 940px; }
