Input element expanding beyond their div container

[elsheepo]

input and button elements in the signup and login forms extend beyond their container when screen width exceeds 676px. Even though I have used CSS Rule input[type=text],input[type=password]{box-sizing: border-box;} What could be causing this?

jsfiddle: https://jsfiddle.net/elsheepo/jgrhf2ho/

[Erik_J]

What could be causing this?

Hi,
It is “bootscrap” and its media rules that messes with you.

The “overrule” style sheet targets the inputs but “bootscrap” targets their containers.
Try overrule the .container width, that’s what changes affecting the inputs. As that is a class I think is not exclusive for these here, I also suggest to be more specific.
E.g.

  #login .container,
  #signup .container{
    width: 100%;
  }

[PaulOB]

@elsheepo

What could be causing this?

You should refer to the bootstrap documentation as you cannot nest container classes in bootstrap.

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.

The gird systems in bootstrap is explained in detail in the docs and you must adhere to the rules exactly or it will never work. If you are going to write your own structure then do not use the bootstrap pre-defined classnames as they have specific uses.

Generally the container class is used only once to wrap and set the width for the whole page. You would seldom need to use it again as all content should go in the column class which is held within a row class.

[elsheepo]

Thank you so much! adding

#login .container,
#signup .container {
  width: 100%;
}

did the trick! I’m going to take a few days to study Bootstrap more in-depth. I really appreciate the responses from both you and PaulOB, both were very informative and helpful!