Hi,
Working through my portfolio and I’m having issues with my Contact Me layout. I’ve fiddled around a bunch (and am using the grey background to see what’s happening) - I want the two sections (the form div and the paragraph div) to be aligned vertically, but at the moment my contact paragraph starts below the form. Any tips?
You mean like this?:
No, sorry, that was a terribly unclear choice of words on my part. I was the top of each div to be at the same height, so they are next to each other but at the same height, if that makes it clearer? So as they are except the section with the text needs to be higher/taller
Like this?:
Hi, I find adding a border to everything temporarily whilst doing layout and alignment helps see where everything is, and you can then use dev tools to check margins etc.
*{
border: 1px solid grey;
}yes! Thanks so much. So to clarify, i needed to put both sections in a div with display set to flex? That’s what I’ve done and it seems to work so fingers crossed.
Can you elaborate at all on why this fixed it for future reference?
Thanks again 
good tip - I think next time I design a site I need to wireframe first, and set up all my layout before I mess around putting content in! A bit too overwhelming now with forms and images and list items etc lol
Read this Complete Guide to Flexbox.
hey, glad you got it working - I know I’m late to the party, but this is a good set of exercises to go through after you’ve read the (very helpful) article that @jenovs linked to: http://flexboxin5.com/
it’s basically just an interactive walkthrough of flexbox that’ll give you a chance to play around with the various properties - really helped me when I was struggling with flexbox
Try using outline instead.
Outline is drawn around the elements, but it’s not a part of the box model, so it will never break your layout.
ah, so i don’t have to account for the extra 1px on each side.
Good tip, thanks.