Hello everybody, I am trying to figure out why my containers are not aligned in the portfolio I am trying to build. I am guessing it has something to do with how I have set up the margins/padding in my first container? I apologize for the confusing nature of my html/css, I am pretty new to it all!
Thank you for any help you can offer.
Here is a link to the portfolio project in question: https://codepen.io/Tomfitz/pen/JEbZLd
Instead of using all that padding, like don’t you try margin:auto; in your CSS. It should help you get all those in line. Also, if you want all the containers to sit in the same lane, for lack of a better term, you should apply the CSS rule to the body of your html – it would look like
body {
margin: auto;
}
I hope that helps with what you’re trying to achieve
Okay here is how you do it.
Lazy html
Div-wrapper
Div-content
Css
.div-wrapper{
width:100%;
Padding: 5% 0;
}
.div-content {width:100%;}
Center inner divs margin: 0 auto;
Depending on look 5-10% on padding is good.
Margin is great for vertical spacing and divs that look like buttons.
Learn Scss/Sass early, life is way too short to write old school css.
Also if youre working within bootstrap you can offset the containers into different columns
class=“col-md-8 col-md-offset-2”
Applying that would center your intro section. Remember there are 12 columns so it applies 2 columns to the left and 2 to the right, making 12 total
Take a look at my code https://codepen.io/spkellydev/pen/RKGgaB
Hi GreatDewDrop,
It appears that you are missing a closing Div to close your first container. I added this above the “portfolio” section and all of your containers aligned properly. I hope this helps.
Thank you for all the help everybody. I have a lot to learn!
The missing closing div is what solved the problem at the moment. However, the others advice on making my containers and CSS cleaner and leaner will certainly help me in the future.