Make body width correspond to divs existence - html

Question

I created a horizontal timeline with dots for each information, however if enough "dots/information" are created the body width needs to be able to expand to make the dots continue on the same line of the timeline instead of moving down a line because of the limited width of the page.
I tried giving the body a larger width, it does fix the problem but I would much rather have the width working dynamically to correspond with the timeline's dots. So if there is only a few dots on the timeline, the page wont have to be any wider, but if there is a lot then the page width should expand.
Here is the css of my timeline.
The time is implemented with PHP and HTML. The dots are created through a simple php sql loop.
div#timeline3 {
background-color: lightblue;
margin-top: 150px;
height: 12px;
width: 100%;
top: 0px;
position: relative;
}
div#timeline3 .inside {
position: absolute;
height: 4px;
background-color: #fff;
width: 0%;
top: 3px;
left: 0;
}
div#timeline3 .dot {
z-index: 99;
transition: 0.3s ease-in-out;
width: 52px;
height: 52px;
border-radius: 50%;
position: relative;
top: -20px;
margin-left: 220px;
float: left;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
}
div#timeline3 .dot:nth-child(1) {
left: 1%;
background-color: lightblue;
}