diff --git a/examples/container.zig b/examples/container.zig
index d732fc1..3515c5b 100644
--- a/examples/container.zig
+++ b/examples/container.zig
@@ -28,10 +28,9 @@ pub fn main() !void {
             .color = .blue,
             .corners = .rounded,
             .sides = .all(),
-            .separator = .{ .enabled = false },
+            .separator = .{ .enabled = true },
         },
         .layout = .{
-            .gap = 2,
             .padding = .all(5),
             .direction = .vertical,
         },
diff --git a/src/container.zig b/src/container.zig
index 4d89e84..fd0396b 100644
--- a/src/container.zig
+++ b/src/container.zig
@@ -95,43 +95,45 @@ pub const Border = packed struct {
             }
         }
 
-        // TODO: the separator should be rendered regardless of the gap
         if (this.separator.enabled) {
             // calculate where the separator would need to be
             const element_cols = blk: {
                 var cols = size.cols - layout.gap * (len - 1);
                 if (this.sides.left) cols -= 1;
                 if (this.sides.right) cols -= 1;
+                cols -= layout.padding.left + layout.padding.right;
                 break :blk @divTrunc(cols, len);
             };
             const element_rows = blk: {
                 var rows = size.rows - layout.gap * (len - 1);
                 if (this.sides.top) rows -= 1;
                 if (this.sides.bottom) rows -= 1;
+                rows -= layout.padding.top + layout.padding.bottom;
                 break :blk @divTrunc(rows, len);
             };
-            const gap = blk: {
-                var gap = layout.gap / 2;
-                if (layout.gap % 2 > 0) gap += 1;
-                break :blk gap;
+            var offset: u16 = switch (layout.direction) {
+                .horizontal => layout.padding.left,
+                .vertical => layout.padding.top,
             };
             var overflow = switch (layout.direction) {
                 .horizontal => blk: {
                     var cols = size.cols - layout.gap * (len - 1);
                     if (this.sides.left) cols -= 1;
                     if (this.sides.right) cols -= 1;
+                    cols -= layout.padding.left + layout.padding.right;
                     break :blk cols - element_cols * len;
                 },
                 .vertical => blk: {
                     var rows = size.rows - layout.gap * (len - 1);
                     if (this.sides.top) rows -= 1;
                     if (this.sides.bottom) rows -= 1;
+                    rows -= layout.padding.top + layout.padding.bottom;
                     break :blk rows - element_rows * len;
                 },
             };
             switch (layout.direction) {
                 .horizontal => {
-                    var offset: u16 = gap;
+                    offset += (layout.gap + 1) / 2;
                     for (0..len - 1) |_| {
                         var cols = element_cols;
                         if (overflow > 0) {
@@ -148,7 +150,7 @@ pub const Border = packed struct {
                     }
                 },
                 .vertical => {
-                    var offset: u16 = gap;
+                    offset += (layout.gap + 1) / 2;
                     for (0..len - 1) |_| {
                         var rows = element_rows;
                         if (overflow > 0) {
@@ -283,11 +285,12 @@ pub fn Container(comptime Event: type) type {
 
                     if (this.elements.items.len == 0) break :resize;
 
-                    const separator = this.properties.border.separator;
+                    if (this.properties.border.separator.enabled) this.properties.layout.gap += 1;
+
+                    const layout = this.properties.layout;
                     const sides = this.properties.border.sides;
-                    const padding = this.properties.layout.padding;
-                    var gap = this.properties.layout.gap;
-                    if (separator.enabled) gap += 1; // the gap will be used for the rendering of the separator line
+                    const padding = layout.padding;
+                    const gap = layout.gap;
 
                     const len: u16 = @truncate(this.elements.items.len);
                     const element_cols = blk: {
@@ -304,11 +307,11 @@ pub fn Container(comptime Event: type) type {
                         rows -= padding.top + padding.bottom;
                         break :blk @divTrunc(rows, len);
                     };
-                    var offset: u16 = switch (this.properties.layout.direction) {
+                    var offset: u16 = switch (layout.direction) {
                         .horizontal => padding.left,
                         .vertical => padding.top,
                     };
-                    var overflow = switch (this.properties.layout.direction) {
+                    var overflow = switch (layout.direction) {
                         .horizontal => blk: {
                             var cols = size.cols - gap * (len - 1);
                             if (sides.left) cols -= 1;
@@ -329,7 +332,7 @@ pub fn Container(comptime Event: type) type {
                     // - don't render them then accordingly -> avoid index out of bounce accesses!
                     for (this.elements.items) |*element| {
                         var element_size: Size = undefined;
-                        switch (this.properties.layout.direction) {
+                        switch (layout.direction) {
                             .horizontal => {
                                 var cols = element_cols;
                                 if (overflow > 0) {