The Final Polish to my Project

Live Wordpress website Link here → Click Here.

these sections are coming from two different widgets →


why has the title deviated in one section despite the fact that both sections have the same structure?

Both sections do not have the same structure. Would you like to revisit (and compare) the HTML and CSS in those sections?

1 Like

widgettitle, widget-item the inner structure is same isn’t it? Or I am overlooking something?

This is incidental, but you didn’t mention which you prefer.

Look at the paddings associated with the ancestoral containers The padding inside the parent container’s are different and the padding around the unbullet in one is negated by unbullet-v in the other.

The structure is not the same.

1 Like

but that is for ul → I am talking about the h2 tags.


Those URLs are both giving “Not Found” errors. In any case, trying to diagnose the issue from an image is at best guesswork.

I’m not sure what problem you are indicating here, but if it’s the apparent difference in padding, then as @ronpat says, you need to look at the containers. There is no padding applied to either of the h2 elements.

“Recent Custom Posts” is contained by widget-item and sits flush with the left-hand side of that div. It in turn is contained by main-sidebar which also has a class of col, and that class is applying padding.

.site-header, .site-footer, .col {
    margin-bottom: 15px;
    padding: 30px;

sorry, sir, these two URLs should be working →

OK. So if my previous post hasn’t answered your question - and I assume it hasn’t - could you please explain more clearly what the issue is, as I seem to be missing something.

1 Like

There is one heading →

Horizontal Sidebar Posts, and the other one
Recent Custom Posts

Both have the same CSS, but Horizontal Sidebar Posts is not aligned properly. Please see both of them in responsive version at least < 1000px;

Reference Page

How should it be aligned? Both h2 headings sit at the extreme left of their immediate containers, with no padding or margin applied to them. What is incorrect about this one?

1 Like

correctly padded →
padding dislocated →

The headings sit in containers that have differences. One container has padding 30px and the other container does not. One container has a list called unbullet which has a padding left of 30px and the other has a rule that sets padding left to zero.

You need to be consistent and I suggest that you use 30px padding on each container and no padding-left on the unbulleted list.


If you want “Horizontal Sidebar Posts” to have 30px padding on the left, you will need to add it somewhere.

As I explained before, both h2s sit at the left of their immediate containers. “Recent Custom Posts” sits at the far left of its immediate container widget-item. widget-item sitts inside main-sidebar, which has 30 px of padding, and it’s that padding which keeps the h2, along with everything else, 30px from the left.

“Horizontal Sidebar Posts” has no such padded outer container, so you will need to add the 30px to that heading to achieve the look you want.

Edit: Ninja’d by Paul.


Instead of looking at screencasts, look at your code.

Please type the following in the head section of your HTML page between <style> tags or on your local stylesheet:

* {outline:1px solid red;}

Please look at your page in a browser and see if you can figure out why the header alignments are different?

This is what I see…



1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.