How to fix pricing section so that when more images are added in dog button then it doesn't overlap with next section i.e. gallery?

here is my code:


Any help is appreciated.

For example:

#galler{
   position:absolute;
   top:2400px;

This doesn’t make sense, you should let the browser layout things for you, otherwise your site won’t work on every device size. You should resize your browser as you develop it, so you can see how it will look on multiple screen sizes.

You don’t need to use float: left; at all anymore, it isn’t predictable and only complicates everything. Today you can use flex or grid and actually know how it will look like. float: left; may have its place on simple things, but not for laying out content like you’re doing.

Saying that, let me show you what I did to fix that overlap:

Delete all of this stuff, it doesn’t make sense to layout everything as absolute:

#galler{
   /* position:absolute;
   top:2400px; */
}

#pricing{
     /* position:absolute;
     top:1810px */
}

For real, I’d start it all over again and don’t use float and position: absolute at all.

thank you so much.But there is another problem. After making the above changes ,in my gallery the background image is coming only for its heading and is not taking its whole body.How to fix it?
here is my link: