How to Navigate Dev Tools to fix CSS issues

Instructions

1. Get to know The Elements Tab & the Styles Tab
   
   The Elements tab shows the HTML Elements that make up the document you're viewing and the Styles tab shows you the CSS styles applied to any element you have selected from the document.
   Note that in the styles tab the most relevant style is at the top. That may mean the style is the most specific, or the last style in the last stylesheet to be computed.
   Example Use Case: You need to test a style in the browser to see if it will work.
   1. Select the element in the elements tab
   2. In the styles tab click the plus button
   
   3. Now your elements selector will be filled in and you can add the style you think will work. Keep in mind that the automatically filled in selector will choose the most specific of that element. For instance an ID of a list item instead of the list item class. Be sure your style applies only to the elements you need it to.
   Tip: You can click the 'Inspector stylesheet' link next to this added style. This will take you to a temporary stylesheet where you can add and edit more CSS styles in the browser.
2. How to Select an HTML Element quickly to Inspect it
   
   Using this Select Element to inspect button you can traverse the Element tree much more easily and grab any element that you are needing to adjust.
   Note that when you select an element this way a pop up will appear to show you relevant style information such as width and height and even text properties, margin, and padding.
   Example Use Case: You need to find a nested element. Some web pages have so many nested elements you would go insane trying to expand each parent element to find what the child you're looking for.
3. Locate and Review the Box Properties of an Element
   
   It helps to know what elements have padding on them and how much padding they have in relation to their width. Using the Select Element to inspect button to select elements with padding, you can take a quick peek at theses properties and change only what is necessary.
   Example Use Case: I want this content container in the above image to allow my full width images to be at least 760px wide. Instead of changing the width of this content container, which would require me to change the width of other elements on the page, I can just reduce the padding by subtracting 760px from the boxes width 804px. Now I can change my left padding on this element from 96px to 44px.
   
   The box size is 804px, it is made up of the content box (blue), the padding (green) and the border (yellow).
   To calculate what I need my padding to be 804-760 = 44px.
   If i want to calculate my current content box width: 804-96 = 708px.

Find where a Style is being inherited from

Example Use Case: you need to change the font for all of the heading elements quickly.
1. Use the select element to inspect button to grab the first heading you see.
2. Next to the styles tab, select the:

1. The Computed Tab
   
2. Double Click on the style
   
3. Locate the selector, the inherited style, and the stylesheet
   
   Here you'll see the selector that the style is coming from, so you can maintain cohesive design. You can cut down on excessive code by overwriting just this style for all of these same selectors. You can also see what stylesheet the style is coming from so you can rewrite the style itself if you have access and the means.