Customize shiny app with images in header and footer

I am customizing a shiny app by adding a header and footer with inline images. I figured out how to add images and adjust their position using tags$styles

. The problem is that when I tried to reposition the image in the footer by adjusting the position from the top of the footer bar, I also changed the position of the image in the header. I know it has something to do with CSS usage, so I'm trying to figure out how to split tags$style

between header and footer. I am not familiar with HTML or CSS, so I am wrong in this process. The code I'm using for the header and footer is below:

tags$header(a(list(tags$style("img {display:inline-block;background-repeat:no-repeat;position:relative;left:20px;z-index:3;}"),tags$img(src="myimage.png", height="110px",width="215px")),href="http://www.link1.com"),
                tags$style("header {background-color: #333333;border-bottom:1px solid #474747;
                           height:90px}") 
tags$div(fluidRow(
  tags$footer(a(list(tags$style("img {display:inline-block;background-repeat:no-repeat;position:relative;left:20px;top:30px;z-index:3;}"),
                     tags$img(src="myimage2.png", height="23px",width="170px")),href="http://www.link2.com"),
              tags$style("footer {background-color: #333333;height:90px}"))))

      

        
        
        
      

    

Thanks in advance for your help!