Fluid Layout Without Boostrap

So what i've got so far isn't much but i've been dabbling with HTML/CSS to get better at web development.
Personally, I don't want to use bootstrap and I'd like to do everything 100% mine or at least as much as possible, rather than taking the easier ways out and making everything off someone else's work.

Can anyone explain to me why the video almost goes against my width percentage and then cuts off to the next line from there on only once it's shrunk down? In theory I'd figure both divs would maintain the same percentage and shrink next to each other without any issues but that doesn't seem to be the case.

Code:

/*News and updates*/
#box {
  display: inline-block;
  border: 1px solid #092649;
  border-radius: 5px 0px 0px 0px;
  padding: 0px;
  margin: 5px;
  height: 250px;
  width: 54%;
  background-color: #02070e;
  float: left;
}
/*advertisement video*/
#box2 {
  display: inline-block;
  width:44.5%;
  padding: 0px;
  margin-right: 5px;
  margin-top: 5px;
  height: 250px;
  background-color:black;
  float: right;
  border: 0px solid red;
    border-radius: 0px 5px 0px 0px;
}
/*embed link*/
iframe {
  float:right;
  width: 100%!important;
  border: 1px solid #092649;
  border-radius: 0px 5px 0px 0px;
}

I'm sure it's something fairly simple or obvious but i'm quite new to this lol

 

Bootstrap is there for you to use. Unless you're interested in making your own version for educational purposes or for deployment, it was literally created so you wouldn't have to do this. As a developer you'll have to use third party libraries and code all the time, so it's something you'll need to get used to if you want to continue down this path. Especially in web development.

 

The way I look at it is bootstrap is the bones to my project.

Just void out any css that you do not want with another css file after it. PM me if you ever need any help I am a senior developer.