Ok this is driving me crazy I don’t know why this isn;t lining up in the grid correctly… I have tried everything and her eis the code
_grid-settings.sass
`@import “neat-helpers”
$column: 90px
$gutter: 30px
$grid-columns: 36
$max-width: 2000px
$visual-grid-color: red
$visual-grid-opacity: 0.3
$visual-grid: true
//Screen sizes
$small-phone: 0px
$large-phone: 481px
$tablet-size: 667px
$large-screen: 1025px
$xl-large-screen: 1480px
//Breakpoints
$small: new-breakpoint(min-width $small-phone 12)
$large: new-breakpoint(min-width $large-phone 12)
$tablet: new-breakpoint(min-width $tablet-size 12)
$screen: new-breakpoint(min-width $large-screen 36)
$l-screen: new-breakpoint(min-width $xl-large-screen 24)
index.haml
.container.video-section
%section.video
%figure
= image_tag(“video.png”, class: “”)
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lacus viverra, euismod neque sed, iaculis risus. Aenean ac elit varius, volutpat magna eget, semper nisi. Mauris ultricies felis vel efficitur fermentum. Sed rhoncus elit at volutpat tristique. Vestibulum ac ipsum turpis. Duis finibus magna eget faucibus varius. Nullam vestibulum leo et interdum finibus. Maecenas pulvinar posuere ullamcorper. Duis nunc erat, porta quis massa a, lacinia vulputate.
_video-section.sass
.container.video-section
%section.video
margin-top: 130px
img
@include media($screen)
@include span-columns(10)
@include shift(1)
p
font-size: 18px
@include media($screen)
@include span-columns(10)
@include shift(1)
the paragraph doesnt line up…!!! How can I debug further this problem or if anyone would like to pair on this it would be great!
`