for some reason i can't locate, this breaks the row so that only two columns are on the row and the third pops down to a second line. there is PLENTY of screen space available and i have not set any width limitations in the CSS myself. i can't figure out why this is happening. it is a simple CSS change and doesn't break when i build it outside of studio using plain HTML and CSS, ie.div{ width: 33.333333%; }
so someone help me out. what am i missing here? there shouldn't be any reason that i understand why this pops the 3rd column to a new line.
Have you clicked on that row and looked in the Styles window? When you click on anything in the HTML pane, it will reflect all CSS that pertains to that item in there. Scroll through there and find the class/id that is causing the issue. If it's locked, just do a copy of it to your custom css file and put the settings how you need them to be.
there is literally nothing. this is a fresh empty template. selecting the row even shows a width of 1200px (not that it should matter; width is a percentage...)
can i post a link to the design file? no external dependencies. it's driving me nuts.
.row has left/right negative margins of 15px each. .col- have left/right padding of 15px each to offset the negative margins on the row. Your adding space with the 5px left/right margins on the .col-'s from the .item {margin:35px 5px;}. Margins apparently, are outside the width of the box, so you are adding 10px width to the 33.333% width which is why it's not fitting.
In your building outside of the app... are you using * {box-sizing: border-box;} and are you using bootstrap.css?
1200px broken down to 3rd's is ~399.96px add the 10px = ~409.96px * 3(cols) = 1,229.88px and that's why it breaks.