У меня проблема с моей веб-страницей моего резюме, которая не соответствует моим правилам min-width и max-width в css.Я не совсем уверен, почему.Моя страница выглядит великолепно с большими полями с обеих сторон ниже ширины 1200 пикселей, но когда ширина становится больше, чем это, все содержимое страницы начинает отображаться на правой стороне и удаляется с экрана.Я пытаюсь сделать так, чтобы максимальная ширина всего тела была примерно 992px, потому что резюме работает лучше, если смотреть на экране примерно на ширине листа бумаги.Тем не менее, макет выглядит ужасно, когда в полном размере.
Вот мой HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Resume - Tyler Cheek</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container header">
<h1>Tyler Cheek</h1>
</div>
<div class="container">
<div class="row">
<div class="contact-left col-md-6 col-sm-12 col-xs-12">
<p>(919)-397-8116</p>
<p>Github: <a href="https://github.com/Hoid" target="_blank">github.com/Hoid</a></p>
<p>tylerlcheek@gmail.com</p>
</div>
<div class="contact-right col-md-6 col-sm-12 col-xs-12">
<p>2604 Hillsborough Street Apt. 202</p>
<p>Raleigh, NC 27607</p>
</div>
</div>
</div>
<div class="container">
<h5><b>Summary</b></h5>
<p>  Team player software engineer with open-source, frontend, backend, and management experience. I make others around me better through excellent communication and a purely constructive attitude. You should hire me because I have a passion for making cool stuff that makes people’s lives better and the broad technical aptitude to do it.</p>
</div>
<div class="container">
<h5><b>Objective</b></h5>
<p>  Seeking a full-time position in Software Development for an innovative company that will help me specialize my skills. I have a vast foundation that allows me to learn new things quickly and want experiences that will help me deepen my skillset.</p>
</div>
<div class="container" style="overflow: auto;">
<h5><b>Education</b></h5>
<div class="row">
<div class="education-left col-sm-6 col-xs-12">
<p>  NC State University, Raleigh NC</p>
<p>  B.S., Computer Engineering May 2017</p>
</div>
</div>
</div>
<div class="container professional-experience">
<h5><b>Professional Experience</b></h5>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>QA Lead</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>December 2017 – April 2018</p>
</div>
</div>
<ul class="position-information">
<li>Led a team of 3 offshore and 1 local Test Engineers in Quality Control, the Software Test Life Cycle, Automation best practices, Team Communication, and Time Management</li>
<li>Introduced and Documented a new effort in website test automation using Snaptest</li>
<li>Initiated a system of code reviews and a deployment plan throughout the company</li>
<li>Developed 10 automated test scripts for API endpoints in Go and numerous others in Postman using Javascript</li>
<li>Created over 75 automated tests for websites across various projects in Snaptest</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Developer/Project Manager</u></p>
</div>
<div class="company-dates">
<p>Imaginovation</p>
<p>April 2017 – December 2017</p>
</div>
</div>
<ul class="position-information">
<li>Developed a base API framework and production-ready endpoints in Go</li>
<li>Designed the Bluetooth LE communication scheme for a mobile application to a custom proprietary IOT healthcare product in C</li>
<li>Led 3 teams of developers across 3 projects in multiple platforms, 2 of which were from start to completion</li>
<li>Created a Unity demo project with lightsabers for the Meta 2 Augmented Reality headset</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Development Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2015</p>
</div>
</div>
<ul class="position-information">
<li>Delivered solutions for 14 software defects and 2 user stories using Java on Android</li>
<li>Contributed to team-wide software integrity using a peer code review process in Gerrit</li>
</ul>
</div>
<div>
<div style="overflow: auto;">
<div class="position">
<p><u>Software Test Student</u></p>
</div>
<div class="company-dates">
<p>Blackberry</p>
<p>Aug. – Dec. 2014, May – Aug. 2016</p>
</div>
</div>
<ul class="position-information">
<li>Documented 51 unique software issues in a Scrum development cycle</li>
<li>Scripted automated test suites for several user stories in RIDE, spanning hundreds of test cases</li>
<li>Developed an Excel macro that parses thousands of user reviews for keywords and trends</li>
<li>Seamlessly Transitioned between 3 mobile operating systems and 2 separate applications</li>
</ul>
</div>
</div>
<div class="container various-technical-experience">
<h5><b>Various Other Technical Experience</b></h5>
<ul class="position-information">
<li><b>Golang/Open Source:</b> Contributed to the alexa-skills-git-golang and go-jira Github open-source repos</li>
<li><b>XHTML/CSS:</b> Built a version of this resume using XHTML/CSS</li>
<li><b>PHP:</b> Personal websitethat interfaces with the OMDB movie search API</li>
<li><b>Python:</b> Personal desktop app client using PyQT4, UI creation, API utilization, Multithreading</li>
<li><b>C:</b> Compiler design, Text autocomplete function, GPS application</li>
<li><b>C++:</b> Team project working with a LIDAR sensor to detect and analyze objects for an autonomous vehicle – used OpenCV and Visual Studio</li>
</ul>
</div>
</body>
</html>
И CSS:
/*
body {
max-width: 992px;
}
*/
h1 {
text-align: center;
}
.position {
float: left;
line-height: 0.8em;
}
.company-dates {
float: right;
line-height: 0.8em;
text-align: right;
}
/* Custom, iPhone Retina */
@media (min-width : 320px) {
body {
margin-top: 10px;
margin-bottom: 10px;
min-width: 320px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
}
.contact-right {
text-align: left;
}
}
/* Extra Small Devices, Phones */
@media (min-width : 480px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 12px;
}
}
/* Small Devices, Tablets */
@media (min-width : 768px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
.contact-right {
text-align: right;
}
}
/* Medium Devices, Desktops */
@media (min-width : 992px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
max-width: 992px;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}
/* Large Devices, Wide Screens */
@media (min-width : 1200px) {
body {
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
}
}