Mysterious "margin-30" in responsive design

Question

I've been trying to learn pure CSS and step away from using Bootstrap for my layouts, as all I really been using it for is for the Bootstrap container. I created a bare bone project to test it out, and with pure css I have wrote my own container class:

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: hidden;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Media Queries */
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    width: 1320px;
  }
}

I have a simple HTML document, with a Hello World header only on the page. I have wrapped this in a div with the class container, and everything seems to be working smoothly on all screen widths, however on Chrome dev tools, in pretty much all phone display models, a mysterious Margin -30 on the right persists. Everything else works wonderfully as I would expect it to. What could be causing this or what am I missing?

Screenshot of -30 right margin

Answer 1

This is due to your padding and the default box sizing of 'content-box' (which is the size inside the padding).

When you say you want width of 100%, it needs to add a negative margin of 30px to make up for the padding because with 'content-box' you are saying "I want the width of the content to be 100% of the container".

You need to indicate the size should be based on the border (i.e. the size including the padding).

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;   << ADD THIS
}

Then, when you say you want width of 100%, you are saying "I want the width of the element, including the padding, to be 100% of the container".

To be honest, I find it much more intuitive for all sizing to be based on the border instead of the content.

To apply to all elements, add css:

* {
    box-sizing: border-box;
}

Answer 2

I have found no message so far, what could respond to the change of structure.

The solution in this case was to make descendand of TTreeNode, where I overwrite dynamical procedure MoveTo and attach an event handler to it:

  THierarchyTreeNode = class (TTreeNode)
  private
    FOnNodeMove:TTVNodeMoveEvent;
  public
    procedure MoveTo(Destination: TTreeNode; Mode: TNodeAttachMode); override;
    property OnNodeMove:TTVNodeMoveEvent read FOnNodeMove write FOnNodeMove;
  end;

...

procedure THierarchyTreeNode.MoveTo(Destination: TTreeNode; Mode: TNodeAttachMode);
begin
   inherited;
   if Assigned(FOnNodeMove) then FOnNodeMove(Treeview, Self);
end;

then I have done necessary changes in TTreeview descendand, where the procedure CreateNode is the key, where are THierarchyTreeNodes created instead of TTreenode. It is somewhat dirty, but... just an example:

 TTreeViewHierarchy = class(TTreeView)
private
FOnNodeMove : TTVNodeMoveEvent;
protected
    function CreateNode: TTreeNode; override;
    procedure DoNodeMove(Sender: TObject; Node: TTreeNode);
published
 property OnNodeMove: TTVNodeMoveEvent read FOnNodeMove write FOnNodeMove;


function TTreeViewHierarchy.CreateNode: TTreeNode;
var
  LClass: TTreeNodeClass;
begin
  LClass := THierarchyTreeNode;
  if Assigned(OnCreateNodeClass) then
    OnCreateNodeClass(Self, LClass);
  Result := LClass.Create(Items);
  (Result as THierarchyTreeNode).FOnNodeMove := DoNodeMove;
end;

procedure TTreeViewHierarchy.DoNodeMove(Sender: TObject; Node: TTreeNode);
begin
   if Assigned(FOnNodeMove) then FOnNodeMove(Sender, Node);
end;

And it works...