We Keep Coding

Why do my divs have this mysterious right margin?

I am trying to align divs #inner3 and #inner4 side by side, but they refuse to cooperate. When I inspect the DOM through Chrome, there is this mysterious right side margin on both divs that extends to the end of the page.
I have the global margin set to 0, but when I look deeper it says that there is no value for margin, period. Why?? Why won't my divs cooperate either? I have removed white space, made them smaller, floating, all to no avail. I have been searching and struggling for over 2 hours now.
Note: the overflow-x is for the animation; the background CSS is for the parallax.
body, html {
height: 100%;
overflow-x: hidden;
margin: 0em;
}
#section2 {
height: 500px;
width: 100%;
background-color: black;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 1px;
display: inline-block;
font-size: 0;
}
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
}
Code: https://codepen.io/hungus--bungus/pen/rdgEze?editors=1100
Page: https://codepen.io/hungus--bungus/full/rdgEze
Photos are taken using the Chrome "Inspect" feature, and information can be found in the "Computed" tab at the bottom after selecting the element.

Adding display: inline-block; to #inner3 and #inner4 will put them side-by-side.
#inner3 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}
#inner4 {
height: 500px;
width: 50%;
font-size: 12px;
display: inline-block;
}

How can I get this .box class to flow like blog posts? + tooltip not working

Everything is exactly where I want it except for the .box class. I want the left and right margins to be centered while the top margin matches that of the sidebar. That part worked out perfectly fine, however, the boxes overlap. Where on earth did I go wrong?
Here's the CSS:
.box {
width: 250px;
margin: -260px auto;
padding: 25px;
border: solid 1px;
word-wrap: break-word;
position:relative;
display:block;
}
And here's the HTML:
<div class="box">
box content
</div>
And now for the tooltip issue... It works fine when I preview the file in a browser but when I uploaded the site, tooltip didn't show up.
You can also see it live here (please use view-source to see the whole code): https://peachie.000webhostapp.com/mobile.html
And don't worry about the "mobile.html" thing, I am nowhere near done with this template.

1) The overlapping is caused by negative margin of the second .box element. Make the sidebar element float to left so that you don't have to use negative margin for .box elements.
CSS:
#sidebar {
top: 20px;
left: 20px;
display: block;
text-transform: uppercase;
text-align: center;
font: italic 9px arial;
text-transform: uppercase;
width: 150px;
position: relative;
padding: 10px;
border: solid 1px;
float: left;
}
.box {
width: 250px;
margin: 10px auto;
padding: 25px;
border: solid 1px;
word-wrap: break-word;
position: relative;
display: block;
}
2) Tooltips don't work because the main page is loaded in HTTPS and tooltip scripts referenced in HTTP. Browser doesn't allow HTTP content to be loaded in HTTPS. Use HTTPS src for these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

Position of div after jQuery.show();

I am trying to get a div to show up in the correct place after using jQuery's .show().
In the image below, you can see the search div (autocomplete div) shows up to the far left, but I want it to show up where I drew the red box.
Basically I have a small header in the center of my site 1000px in width, and when the autocomplete div shows up, I'd like it to be lined up in the right place, but I'm not sure how set margins or anchors to get it to be in the right spot.
Here is my JS:
$('#sbar').focus(function(){
$('#acd').show();
});
Here is the CSS for the autocomplete DIV:
.autoCompleteDiv{
width: 428px;
height: 150px;
position: fixed;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
top: 66px;
padding: 10px;
font-size: small;
color: gray;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
display: none;
opacity: 0.93;
Basically I want to move the div into the red spot, but have it compatible between screen sizes, and have it stay lined up when the window is 'windowed'.
Any ideas on how to do this?
Regards

If you use the search div as a container for your auto complete div, then it should show in
place. I have created a quick demo that illustrates this.
the html looks like this:
<div id="search"><input value="search" type="text"/>
<div id="auto"><p>autocomplete</p></div>
</div>
and the css:
#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}
To make it responsive, simply use media queries to update the position of the search box...
hope that helps...

Figured it out.
Made a 1000px container div with:
#acdContainer {
width: 1000px;
height: 150px;
top: 64px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
And changed my auto-complete div to be:
.autoCompleteDiv{
width: 730px;
margin-left: 250px;
margin-top: 2px;
height: 150px;
position: relative;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
padding: 10px;
font-family: Raleway;
font-size: small;
color: gray;
overflow-y: scroll;
display: none;
}
So that the autocomplete div saw itself as being in a 1000px window, which was always centered.

Sticky Sidebar issues

I am using stickySidebar.js for my sidebar. The problem I recently discovered with it, is as you can see on the image below, it pops up above the #container in Internet Explorer, Chrome, Opera, Firefox, Safari (MAC) and the iPad.
I am guessing it has something to do with the positioning: ;, but I can't figure out whats wrong with it for sure, maybe the script is altering the positioning.
What I also found out, is that if you extend the browser window full screen, the #sidebar appears like it should, on top of the container. But if you shrink the browser window and reload. #sidebar appears on above the container, like in the image below. Same goes for JSFiddle, if you shrink the window it appears above, and if you extend it, it appears like it should on top.
I've made a fully functioning JSFiddle here.
And my CSS:
#sidebar {
display: block; margin: 0 0 0 80px; padding: 10px 0 0 0;
width: 290px; height: 300px;
background-color: #ffffff;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
z-index: 10;
}
#sidebar.sticky { float: none; position: fixed; top: auto; z-index: 10; left: auto; }
div#container {
position: relative; float: left; clear: none;
display: block; margin: 0; padding: 0;
width: 100%; height: 2000px;
background-color: yellow;
}
footer {
position: relative; float: left; clear: none;
display: block; margin: 0; padding: 0;
width: 100%; height: 500px;
background-color: #1a3c58;
}
If I change #sidebar.sticky position from fixed to absolute. The script doesn't work.
Thanks.

Just remove this line from the config variable:
sidebarTopMargin: -10,
That seems to be what you don't want.

Appending a <div> to the horizontal center of another <div>

I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.

Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/

Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo

Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link