I had both paragraphs styled the same way and that worked fine until I added the ‘Cornwall’ header and moved the 1st paragraph under it.
Basically I want to align the 2nd image, header and paragraph the exact same as the 1st section so they align vertically. I have used the exact same styles but it won’t replicate!
If anyone can point me in the right direction it would be much appreciated! So too, is feedback about the rest of the code.
I don’t have time to dive in to this too much but the CSS styling I’m seeing on #para stands out as a red flag. Using relative positioning and adjusting top/left is probably contributing to this problem and seems unnecessary. I’m assuming you are doing this because the flex display on the section is putting the figure, h2, and paragraph side by side and you are moving the paragraph under the heading using relative positioning. I think the better tactic would be to wrap the h2 and paragraph in a div and then you would have two direct children of the section which would be placed side by side but the heading and paragraph would still flow naturally in one column.
usually elements that have the same styling should be styled via a class selector. I dont see that approach in your document. You target every single element via an id. When you have different styling for different elements, via id, its normal they acquire different looks.
Try to target both elements(which you aim to look identical) with the same class selector and apply styles to that class in a way they both look alike. From what i can see, they hold similar elements whithin, so there wont be need to much or any specific adjustments for the separate elements.
You manipulate your elements positioning, top/left/right etc parameters a lot. This is not very flexible, it takes them our of their regular order and can mess up the looks for different screens. I see you used some flexbox. Flexbox on its own can arrange elements by your liking, without messing up too much with elements positions.