Question

I just started doing HTML/CSS, So please correct me if i have made any huge mistakes in my code.

The problem is as seen on this picture (Sorry about the some of the black boxes, that was just to hide some content, it’s only the image at the top that is the problem)

https://i.stack.imgur.com/p3YrZ.png

You can see that the picture is overlapping the border. So i’m wondering if there is any way to to fix that with CSS, or do i have to edit the picture so it fits with my border corners?

Here is the code

I have done some research throughout the internet, i might have an idea about it’s something to do with my position absolute or/maybe relative? But i’m not sure at all, so i hope you guys can help me along

Answer 1

Try giving “header” the same border radius at the top as your wrapper element has and adding overflow:hidden. I think that may work.

#header {
 -webkit-border-top-left-radius: 50px;
 -webkit-border-top-right-radius: 50px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 50px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
overflow:hidden;
}

As an aside your use of absolute positioning for your site is not needed.

To center your site just give your #wrapper element “margin:0 auto;”

All of your orther elements are using absolurte positiong as well. Just let them flow one after another and use floats – don’t use absolute positioning to achieve layout like this.