diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index d2435c363203..b9315894a4b4 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -242,7 +242,10 @@ class AttachmentCarousel extends React.Component {
      * @returns {JSX.Element}
      */
     renderCell(props) {
-        const style = [props.style, styles.h100, {width: this.state.containerWidth}];
+        // Use window width instead of layout width to address the issue in https://github.com/Expensify/App/issues/17760
+        // considering horizontal margin and border width in centered modal
+        const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth);
+        const style = [props.style, styles.h100, {width: this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2 + 1}];
 
         return (
             <View
diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js
index 0475635a35f5..90e309dee1c0 100644
--- a/src/styles/getModalStyles/getBaseModalStyles.js
+++ b/src/styles/getModalStyles/getBaseModalStyles.js
@@ -1,6 +1,13 @@
 import CONST from '../../CONST';
 import variables from '../variables';
 import themeColors from '../themes/default';
+import styles from '../styles';
+
+
+const getCenteredModalStyles = (windowWidth, isSmallScreenWidth) => ({
+    borderWidth: styles.centeredModalStyles(isSmallScreenWidth).borderWidth,
+    width: isSmallScreenWidth ? '100%' : windowWidth - styles.centeredModalStyles(isSmallScreenWidth).marginHorizontal * 2,
+});
 
 export default (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}) => {
     const {isSmallScreenWidth, windowWidth} = windowDimensions;
@@ -76,9 +83,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain
                 marginTop: isSmallScreenWidth ? 0 : 20,
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
-                borderWidth: isSmallScreenWidth ? 1 : 0,
                 overflow: 'hidden',
-                width: isSmallScreenWidth ? '100%' : windowWidth - 40,
+                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
             };
 
             // Allow this modal to be dismissed with a swipe down or swipe right
@@ -112,9 +118,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain
                 marginTop: isSmallScreenWidth ? 0 : 20,
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
-                borderWidth: isSmallScreenWidth ? 1 : 0,
                 overflow: 'hidden',
-                width: isSmallScreenWidth ? '100%' : windowWidth - 40,
+                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
             };
             swipeDirection = undefined;
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a8e86b220a03..9c16c1ee677a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1977,6 +1977,11 @@ const styles = {
         backgroundColor: themeColors.modalBackdrop,
     },
 
+    centeredModalStyles: (isSmallScreenWidth) => ({
+        borderWidth: isSmallScreenWidth ? 1 : 0,
+        marginHorizontal: isSmallScreenWidth ? 0 : 20,
+    }),
+
     imageModalImageCenterContainer: {
         alignItems: 'center',
         flex: 1,