I may be a difficult pill to swallow, and there is no nice way for me to say this, but you are about as far away as you could get from designing a professional looking web page. I mean that in the nicest possible way as we have all been where you are now and made the very same mistakes. Indeed its making these mistakes that leads us to build better sites eventually.
I won't go into too much detail at this stage but the first thing you should know is that sites are not designed by absolutely placing everything on the screen. Absolute positioning is used in small doses but not for structural layout because it has no flow (for example you can't have a footer under an absolute layout unless you us a 'magic number' which means that the layout can never change and dare a user resize the page the whole thing breaks).
Here is one of your magic numbers.
<body class="logo" style="[B]height:1000%"[/B] >
border:4px solid black;
[B] margin:32%[/B] auto 0 auto
These are all 'magic numbers' you have used so that elements avoid other elements based on the elements apparent size.
You have placed your image at margin-top:32% which will be 32% of the width of the element as margin is always based on the width of the containing block and not the height. That means your image will rise upwards across your content as the page shortens.
Suffice to say in a well designed page you would have virtually none of that positioning and one element would logically follow the next without the need for specific positioning. Yes, for some odd horizontal elements you may use absolute positioning but only when the element that contains them controls the flow of the document. In most case horizontal alignment is achieved with floats, inline-block or display:table-cell.
There would be very little positioning involved and one element would follow the next logically and seamlessly. Add more content or take content away and the layout still works without changing the positioning.
The main thing to remember is to control the flow of the document so that content flows down the page as required. Don't put little islands of content absolutely placed into position all over the page as that is fragile and unmaintainable in the real world unless the site is very basic and has little content.
Hope that gives you a few pointers in the right direction.