Image movement when adding new content to <h1>

Question

The first site is here (just heads-up)! My problem is that I am trying to put my content (Flying Fish Painting and Maintenance with Service link below) in the h1 category without moving the images! I would really like the two images (left and right) to remain in the upper left and upper right, respectively, when I add the href Services link. Any ideas? Here is my code:

.round1 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; width: 70px; height: 70px; } .round2 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; width: 70px; height: 70px; } .linkto { color: white; font-size: 60%; font-family: Arial; } .linkto:hover { color: blue; } body { padding: 20px 20px 20px 20px; } h1 { color: white; border: 6px solid black; border-radius: 25px; text-align: center; font-family: Forte; font-weight: bold; background-color: black; font-size: 180%; padding-bottom: -50px; } 

 <h1> Flying Fish Painting &amp Maintenance</br> <img class="round1" src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291" align=left> <img class="round2" src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291" align=right> <a class="linkto" href="C:\Users\CE User\Desktop\services.html">Services</a> </h1> 

Answer 1

First of all, instead of iterating over everything inside the H1 tag, you can put the contents in separate divs and then use the flex-box to align them. Why not in the H1 tag? That meant the headlines.

There are so many ways to achieve what you are striving for, this is just one of them.

 /* More about box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .wrapper { background: black; border-radius: 25px; text-align: center; padding: 1rem; margin: 0 auto; display: flex; justify-content: center; /* could be any number you want */ max-width: 780px; } .image-wrapper { flex-basis: 70px; } img { max-width: 100%; } h1 { text-align:center; font-family:Forte; font-weight:bold; color: white; margin: 0 1rem 0 1rem; } a { color: white; text-decoration: none; font-size: 1.5rem; font-family:Arial; } a:hover { color: blue } 

 <div class="wrapper"> <div class="left image-wrapper"> <!-- removed the align attribute --> <img src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291"> </div> <div> <h1> Flying Fish Painting &amp Maintenance</h1> <a class ="linkto" href="C:\Users\CE User\Desktop\services.html">Services</a> </div> <div class="right image-wrapper"> <img src="https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=300&h=291"> </div> </div> 

Answer 2

Hope this helps.

 .linkto { color: white; font-size: 60%; font-family: Arial; } .linkto:hover { color: blue; } body { padding: 20px 20px 20px 20px; } h1 { color: white; border: 6px solid black; border-radius: 25px; text-align: center; font-family: Forte; font-weight: bold; background-color: black; font-size: 180%; position: relative; } h1:before { position: absolute; content: url('https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=50,h=50'); left: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; width: 70px; height: 70px; background-color: black; } h1:after { position: absolute; content: url('https://flyingfishpainting.files.wordpress.com/2013/04/flying_fish_logo_hressmall.png?w=50,h=50'); right: 0; top: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; width: 70px; height: 70px; background-color: black; } 

 <h1> Flying Fish Painting &amp Maintenance <br/> <a class="linkto" href="C:\Users\CEUser\Desktop\services.html">Services</a> </h1>