Moving Content; when browser is resized :(

Direct Link

just try resizing your browser when viewing the website.

here is the css for the menu area;

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 100px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span {
display: none;
position: absolute;
}

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span {
display: block;
}

#menu .about {
width: 75px;
height: 14.5px;
background: url(***) no-repeat;
left: 96px;
top: 73px;
}

And this is what the header.php menu links look like

<ul id=”menu”>

• about<span></span>

(I blocked out the urls, hope that doesn’t affect getting any help.

<ul id=”menu”>

• about<span></span>

i see the typing in the example makes a link actually pop up not the actual text in my header file.
so i repalced href with tag

<ul id=”menu”>

• =”https://localhost/wordpress/about&#8221; class=”about”>about<span></span>

wow, I’ve tried many times to make the text visible -_-

<ul id=”menu”>

• about<span></span>

hopefully this works?

i just deleted the end tag to the link

i give up.

<ul id=”menu”>

• about<span></span>

<ul id=”menu”>

• href=”https://localhost/wordpress/about&#8221; class=”about”>about<span></span>

:'( omg that really gave me a head ache.

please dont report me if multiple posts like that is not acceptable.
i’m new to this.
and I was only trying to make the text visible to the helpers.

try and add a position: relative; to the style of #wrapper:

#wrapper{
	margin: 0 auto 0 auto;
	width: 450px;
	text-align: left;
position:relative;
}

that way, the position: absolute of your div #sidebar is no more relative to the browser window.

https://www.w3schools.com/css/css_positioning.asp

?? let me try that right now .

okay i’ve tried that…
but now my side bar is where i never wanted it to be…