Macbook Air 2014
I am having a number of strange issues with both vertical and horizontal alignment of nested objects.
Whenever I increase the window size, some elements change their vertical alignment despite their having absolute vertical alignment nested inside of an relative aligned container, with vertical position defined in pixels. Check the element “img” (my portrait) inside of the first hero. When the I modify the dimensions of the browser window the image moves over to the right a bit (also an unwanted effect) and down about 5-10 pixels. Why is it moving down?
Similarly, you may notice that the vertical position of “img” is -4 pixels from the top of it’s container---- except that it’s not -4 pixels from the top of it’s container. This problem happens all of the time: Nested elements seem to take on positions relative to their container that are totally arbitrary. Some times they are way below, sometimes way above, the container in which they are nested in.
A third question: at some point in this long and tedious journey that is learning to design with markup through the webflow platform, the width of almost all of my divs and containers, which is set to auto and supposed to cover the whole page, all created a 20-30 pixel margin on the left. I have tried just about everything to get it to go back to the way it was, with no luck. Any ideas as to why this is happening?
I am assuming these issues are due to my lack of experience manipulating html5 markup. The problems are recurrent and quite confusing. I hope that through revealing my current conundrum I can arrive at a better understanding of how everything is structured, and how I may be causing this problem. Any help that can be provided in this regard would be much appreciated.
Thanks in advance,