Positioning Images in Website Header

Okay I made three changes to the styling and it made the black border show up 100%.

#logo {
   width: 748px;
   padding: 1px;
}

And then on the merseyside image, I added 1px padding-right on the div.

And finally on the Scouting in Lydiate image, I added 1px padding-left on the div.

Oh cool! I used to live down the road from your scout troop!

Start by adding margin:2px;
to:

#logo {
    width: 750px;
}

in style.css. Then add margin-left:1px; to the inline CSS on the “Scouting since…” image div. Finally, you need to reduce the width of each of the badge images in the header and add a 1px margin-right to the inline style for each of their div blocks.

dkotter, thanks for the reply. I had partial success using your solution. The first part sorted out the top left corner of the header. However, the border is still obscured to the side of the images. I changed the code as below:
First change:
#logo {
width:748px; (was 750px)
padding:1px; (added)
}

The second and third changes didn’t change anything:
I added the padding statements in header.php. Should I have removed the “float-right” and “float-left” statements? Are these forcing the images to overlap the border?

<div style="float:right"; padding-right=”1px"; border-left="10px";><a href="https://www.merseysidescouts.com/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right"; border-right="10px";><a href="https://www.altsidescouting.org.uk/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right"; border-right="10px";><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
<div style="float:left"; padding-left="1px"; border-left="50px";><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

[Please post code snippets between backticks or use the code button.]

You have a typo in your code, which is probably why it isn’t working. It should look like this:

<div style="float:right; padding-right:1px";><a href="https://www.merseysidescouts.com/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right"; border-right="10px";><a href="https://www.altsidescouting.org.uk/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right"; border-right="10px";><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
<div style="float:left; padding-left:1px;"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

Notice the change of parentheses and the change from = to :

Just wanted to correct a few more typos, be very careful with the double quotes and semi-colons in your inline css style attributes:

<div style="float:right; padding-right:1px"><a href="https://www.merseysidescouts.com/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/merseyside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right; border-right: 10px"><a href="https://www.altsidescouting.org.uk/"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/altside-black-yellow.png" alt="" width="70" height="110" /></a></div>
<div style="float:right; border-right: 10px"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/group-black-yellow.png" alt="" width="67" height="110" /></div>
<div style="float:left; padding-left:1px;"><img src="https://www.lydiatescouts.org.uk/wp-content/uploads/scouting-tagline-5.png" alt="" width="278" height="20" /></div>

Thanks dkotter. Works fine now. My coding knowledge has plenty of room for improvement!

Sorry to go off-message, but thanks esmi for the reply. (dkotter just beat you to it).

So, you’re from Lydiate? It’s a small world!

So, you’re from Lydiate? It’s a small world!

I’ll say. Used to live just off Coronation Road a few years back!