HELP: beginner CSS confusing issue

Just been going through Exercise 4 in the HTML and CSS section. I liked what the example did with the separate scrolling in the navbar, particularly when the media query comes into effect on a narrow screen. So I tried to copy it. but something really strange happens when i go to the narrow screen. I can’t figure out what on earth is happening. I can’t seem to make changes to ul or li items on the media query and the navbar ul now comes outside of its containing element and beneath the main section.

If anyone has a moment to spare and wants to help me figure out whats going on this would be greatly appreciated.!

weird%20shit|601x320

Sorry I’m a bit of a noob. Hope this link takes you to the code i’ve written

https://codepen.io/AlexofSmeg/pen/rrmxoP

In your media query you need to set the overflow on on your #navbar to hidden. That’s what controls the height of the section. so if you do this:

	#navbar {
		position:absolute;
		height:140px;
		width:100%;
		margin-top:0;
		border:black solid 1px;
    overflow: hidden;
	}

in your media query it should start behaving. You are trying to control this box this is where the overflow is happening.

Hope you got it! Otherwise we can figure it out

thanks guys, I got it now